[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.' ); } }) }; ```