道具

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

在 JSX 中,使用属性语法传递 props

<MyComponent userID={123} />

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

// The render function inside MyComponent
render() {
    return (
        <span>The user's ID is {this.props.userID}</span>
    )
}

定义所有 props 及其类型以及适用的默认值非常重要:

// defined at the bottom of MyComponent
MyComponent.propTypes = {
    someObject: React.PropTypes.object,
    userID: React.PropTypes.number.isRequired,
    title: React.PropTypes.string
};

MyComponent.defaultProps = {
    someObject: {},
    title: 'My Default Title'
}

在这个例子中,prop someObject 是可选的,但是 prop tiuan3 是必需的。如果你未能向 MyComponent 提供 userID,则在运行时,React 引擎将显示一个控制台,警告你未提供所需的道具。请注意,此警告仅显示在 React 库的开发版本中,生产版本不会记录任何警告。

使用 defaultProps 可以简化

const { title = 'My Default Title' } = this.props;
console.log(title);

console.log(this.props.title);

它也是使用 object arrayfunctions 的保障。如果你没有为对象提供默认道具,如果未传递道具,则以下内容将抛出错误:

if (this.props.someObject.someKey)

在上面的示例中,this.props.someObjectundefined,因此 someKey 的检查将引发错误并且代码将中断。使用 defaultProps,你可以安全地使用上述检查。