react的类型检查（PropTypes）

类型检查时为了避免像组件中传入不必要的数据类型，从而导致一些不必要的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'
};