PropTypes

propTypes 允許你指定元件需要的 props 以及它們應該是什麼型別。你的元件無需設定 propTypes 即可工作，但最好定義這些元件，因為它會使你的元件更具可讀性，作為正在閱讀元件的其他開發人員的文件，在開發過程中，如果你嘗試使用 React，它會發出警告設定一個與你為其設定的定義不同的道具。

一些原始的 propTypes 和通常可用的 propTypes 是 -

  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol

如果將 isRequired 附加到任何 propType，則必須在建立該元件的例項時提供該 prop。如果你未提供所需的 propTypes，則無法建立元件例項。

句法

ES5

var MyClass = React.createClass({
  propTypes: {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.propTypes = {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
};

ES7

class MyClass extends React.Component {  
     static propTypes = {
        randomObject: React.PropTypes.object,
        callback: React.PropTypes.func.isRequired,
        ...
    };
}

更復雜的道具驗證

同樣，PropTypes 允許你指定更復雜的驗證

驗證物件

...
    randomObject: React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    }).isRequired,
...

驗證物件陣列

...
    arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    })).isRequired,
...