React 道具
示例
道具是一种将信息传递到React组件的方法,它们可以具有任何类型,包括函数-有时称为回调。
在JSX中,props带有属性语法
<MyComponent userID={123} />
现在可以从props对象访问MyComponentuserID的定义内
//MyComponent内部的渲染功能 render() { return ( <span>The user's ID is {this.props.userID}</span> ) }
定义allprops,它们的类型,以及在适用时定义其默认值很重要:
//在MyComponent的底部定义 MyComponent.propTypes = { someObject: React.PropTypes.object, userID: React.PropTypes.number.isRequired, title: React.PropTypes.string }; MyComponent.defaultProps = { someObject: {}, title: 'My Default Title' }
在此示例中,道具someObject是可选的,但道具userID是必需的。如果你不能提供userID到MyComponent,在运行时反作用于发动机将显示一个控制台,警告您未提供所需的道具。但是请注意,此警告仅显示在React库的开发版本中,生产版本将不会记录任何警告。
使用defaultProps可以简化
const { title = 'My Default Title' } = this.props; console.log(title);
至
console.log(this.props.title);
这也是使用objectarray和的保障functions。如果不为对象提供默认道具,则如果未传递道具,则以下内容将引发错误:
if (this.props.someObject.someKey)
在上面的示例中,this.props.someObjectisundefined,因此of的检查someKey将引发错误并且代码将中断。随着defaultProps您的使用,您可以安全地使用上述检查。