React普通函数组件如何传递props？函数组件传参渲染报错问询

普通函数组件完全支持传递props，你遇到的报错是props的读取规则和类组件不同导致的。

报错原因 #

• 类组件基于ES6 Class实现，有独立的组件实例，this默认指向实例本身，所以可以通过this.props读取传入的属性
• 普通函数组件没有实例化过程，不存在指向组件实例的this，你代码中访问this.props时，this实际指向全局对象（严格模式下为undefined），所以会抛出对象相关错误。

修复方法 #

将props作为函数的第一个入参接收即可，两种常见写法如下：

// 写法1：直接接收props对象
function Kite(props) {
  return (<h1>{props.kiteprop}</h1>)
}

// 写法2：解构props直接获取对应属性，代码更简洁，推荐使用
function Kite({ kiteprop }) {
  return (<h1>{kiteprop}</h1>)
}

其他代码问题提示 #

你在渲染Time组件时重复声明了三次input prop，React会自动用最后一次声明的值覆盖前面的赋值，最终this.props.input实际拿到的是字符串"false"。如果需要传入数组、布尔值等非字符串类型的prop，需要用花括号包裹值，示例如下：

// 传入布尔值false而非字符串"false"
<Time input={false} />

内容的提问来源于stack exchange，提问作者user16123347