Reactjs 的 PropTypes 使用方法

propTypes 使用來規範元件Props的型別與必需狀態

var Test = React.createClass({
  propTypes: {
    // required
 
    requiredFunc: React.PropTypes.func.isRequired,
    requiredAny: React.PropTypes.any.isRequired,
 
    // primitives, optional by default
 
    bool: React.PropTypes.bool,
    func: React.PropTypes.func,
    number: React.PropTypes.number,
    string: React.PropTypes.string,
  },
  render:function(){
  return <div/>
  }
});
 
var component = React.render(
        <Test requiredFunc="bar" bool="true" requiredAny="a"/>,
    document.body
);

若沒有按照規範，會顯示警告

線上測試：http://jsbin.com/suweke/3/edit

React.PropTypes 的種類

React.PropTypes.array           // 陣列
 
React.PropTypes.bool.isRequired // Boolean 且必要。
 
React.PropTypes.func            // 函式
 
React.PropTypes.number          // 數字
 
React.PropTypes.object          // 物件
 
React.PropTypes.string          // 字串
 
React.PropTypes.node            // 任何類型的: numbers, strings, elements 或者任何這種類型的陣列
 
React.PropTypes.element         // React 元素
 
React.PropTypes.instanceOf(XXX) // 某種XXX類別的實體
 
React.PropTypes.oneOf(['foo', 'bar']) // 其中一個字串
 
React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 其中一種格式類型
 
React.PropTypes.arrayOf(React.PropTypes.string)  // 某種類型的陣列(字串類型)
 
React.PropTypes.objectOf(React.PropTypes.string) // 具有某種屬性類型的物件(字串類型)
 
React.PropTypes.shape({                          // 是否符合指定格式的物件
 
  color: React.PropTypes.string,
  fontSize: React.PropTypes.number
});
React.PropTypes.any.isRequired  // 可以是任何格式，且必要。
 
// 自定義格式(當不符合的時候，會顯示Error) 
 
// 不要用`console.warn` 或者 throw, 因为它在`oneOfType` 的情况下無效。
 
customPropType: function(props, propName, componentName) {
  if (!/^[0-9]/.test(props[propName])) {
    return new Error('Validation failed!');
  }
}

getDefaultProps

當父元件沒有提供props的屬性時，可以採用getDefaultProps，預設props屬性的方式，讓元件使用預設的設定值，確保有props帶入。

var ComponentWithDefaultProps = React.createClass({
    getDefaultProps : function () {
        return {
                value : 'default value'
              };
    },
    /* ... */
});