[toc] ## usage ### 支持常用的七大JS数据类型 你可以给React中的每个`prop`规定一个JS数据类型。 ``` optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, ``` 任何可被渲染的元素（包括数字、字符串、reactElement或数组） ``` optionalNode: PropTypes.node, ``` ## react element ``` optionalElement: PropTypes.element, ``` ## 某一个类的实例 ``` optionalMessage: PropTypes.instanceOf(Message) ``` ## 枚举值 ``` optionalEnum: PropTypes.oneOf(['News', 'Photos']) ``` ## 特定某一类型的对象 ``` optionalObjectOf: PropTypes.objectOf(PropTypes.number), ``` ## 特定某些类型的对象 An object that could be one of many types ``` optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), ``` ## 特定具有某些属性的对象 ``` optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }), ``` ## 特定某一种类型的数组 ``` optionalArrayOf: PropTypes.arrayOf(PropTypes.number), ``` ## any type ``` requiredAny: PropTypes.any.isRequired, ``` ## isRequired ## 自定义验证器 你也可以指定一个自定义验证器。它应该在验证失败时返回一个错误对象(`new Error`)，而不是使用`console.warn`或则`throw`，这在`oneOfType`里不会起作用。 ``` //props当前组件接收的所有属性 //propName 当前验证的属性的名字 //componentName 当前组件的名字 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( 'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }, ```  ### 你同样可以在`arrayOf`和`objectOf`中使用自定义验证器。 第一个参数是这个属性对象/数组，第二个参数为key值 ``` customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( 'Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }) }; ```