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,
...