类型检查时为了避免像组件中传入不必要的数据类型,从而导致一些不必要的bug。下面是学习PropTypes的时候的一些笔记
声明为js类型
optionalArray: PropTypes.array,//数组
optionalBool: PropTypes.bool,//布尔
optionalFunc: PropTypes.func,//function
optionalNumber: PropTypes.number,//数字
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
可以声明为任何可以被render的类型
optionalElement: PropTypes.element,
声明为某个类的实例
optionalMessage: PropTypes.instanceOf(Message),
使用枚举限定
optionalEnum: PropTypes.oneOf(['News', 'Photos'])
使用object限定为多种类型
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
某个特定的数组类型
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
某个特定的Object类型
optionalObjectOf: PropTypes.objectOf(PropTypes.number)
可以使用isRequired来实现上面的所有校验
requiredFunc: PropTypes.func.isRequired,
使用function
可以使用一个function来自定义一个校验器 它应该返回一个Error的object类型的错误当校验失败的时候 如下:
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
设置默认的props值
使用 组件.defaultProps = {} 的语法来 例如下面:class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.defaultProps = {
name: 'Stranger'
};