React 道具

示例

道具是一种将信息传递到React组件的方法，它们可以具有任何类型，包括函数-有时称为回调。

在JSX中，props带有属性语法

<MyComponent userID={123} />

现在可以从props对象访问MyComponent userID的定义内

// MyComponent内部的渲染功能
render() {
    return (
        <span>The user's ID is {this.props.userID}</span>
    )
}

定义all props，它们的类型，以及在适用时定义其默认值很重要：

// 在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);

这也是使用object array和的保障functions。如果不为对象提供默认道具，则如果未传递道具，则以下内容将引发错误：

if (this.props.someObject.someKey)

在上面的示例中，this.props.someObjectis undefined，因此of的检查someKey将引发错误并且代码将中断。随着defaultProps您的使用，您可以安全地使用上述检查。