react的傳值型別PropTypes簡單說明
阿新 • • 發佈:2019-01-08
1、首先可以有那麼多種型別
propTypes: { // 可以宣告 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, }
2、有部分特殊的型別
propTypes:{ // 字串,DOM 元素或包含這些型別的陣列。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符宣告 prop 為類的例項。 optionalMessage: React.PropTypes.instanceOf(Message) }
3、只接受特定的值
propTypes:{ // 用 enum 來限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多個物件型別中的一個 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定型別組成的陣列 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 }), // 以後任意型別加上 `isRequired` 來使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意型別 requiredAny: React.PropTypes.any.isRequired, }
4、自定義的驗證器
propTypes:{ // 自定義驗證器。如果驗證失敗需要返回一個 Error 物件。不要直接 // 使用 `console.warn` 或拋異常,因為這樣 `oneOfType` 會失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } }