第31课 - Typechecking With PropTypes

propTypes

概念

React拥有内置的类型检测机制，为组件的props运行类型检测。PropTypes定义为组件类自身的属性，用以定义prop的类型。在开发模式下，当提供一个不合法的值作为prop时，控制台会出现警告（warning），但不会报错，程序可以正常运行；在产品模式下，为了性能考虑应忽略propTypes.
React.PropTypes输出一系列的验证器，用以确保你收到的数据是合法的。

check示例

// 可以声明prop是特定的JS基本类型  
// 默认情况下这些prop都是可选的  
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
// 任何可以被渲染的事物：numbers, strings, elements or an array    
// (or fragment) containing these types.   optionalNode: 
React.PropTypes.node,
// A React element.
optionalElement: React.PropTypes.element,
// 你可以用以上任何验证器链接‘isRequired’，来确保prop不为空
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 声明一个prop是某个类的实例，用到了JS的instanceof运算符
optionalMessage: React.PropTypes.instanceOf(Greeting),
// 用enum来限制prop只接受特定的值
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 指定的多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Greeting)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 一个指定形式的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 自定义验证器，如果验证失败，必须返回一个Error对象
// 不要直接使用console.warn或者throw，这些在oneOfType中都没用
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 你也可以为arrayOf和objectOf提供一个验证器
// 如果验证失败，它也应该返回一个Error对象
// 在array或者object中，验证器对于每个key都会被调用The first two
// 验证器的前两个arguments是array或者object自身以及当前的key值
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};