1. 程式人生 > >react的傳值型別PropTypes簡單說明

react的傳值型別PropTypes簡單說明

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!');
      }
}