propTypes:
为防止父组件给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误,在子组件中可以对父组件传递过来的参数进行校验,使用的就是propTypes。
使用方法:
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
引入proptypes,调用组件propTypes属性对参数进行校验。PropTypes
导出一系列验证器,可用于确保您收到的数据有效。在这个例子中,我们正在使用PropTypes.string(要求参数是字符串类型的)
。如果为prop提供了无效值,则会在JavaScript控制台中显示警告。出于性能原因,propTypes
仅在开发模式下进行检查。
验证器还有:
- PropTypes.array
- PropTypes.bool
- PropTypes.func
- PropTypes.number
- PropTypes.object
- PropTypes.symbol
- PropTypes.node
- PropTypes.element
- PropTypes.instanceOf(类名)
- PropTypes.oneOf([可选值列表])
- PropTypes.oneOfType([PropType.string,....]):许多类型中的一种
- PropTypes.arrayOf([]);包含某些特定类型值的数组
- PropTypes.objectOf();具有特定类型的属性值的对象
- 链式操作表示此参数是必须的:eg:PropTypes.array.isRequired表示此参数为一个数组类型的且必须存在
defaultProps:
defaultProps:为参数定义默认值
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// Specifies the default values for props:
Greeting.defaultProps = {
name: 'Stranger'
};
// Renders "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
为name定义默认值为字符串Stranger当父组件没有向子组件传递name属性值时name为默认值。
所以类型检查也将适用于defaultProps
。