React学习之进阶类型检查（十二）

1.PropTypes类型检测

React提供有一套类型检测的自己，通过React.PropTypes来进行控制

class Greeting extends React.Component {  render() {    return (      <h1>Hello, {this.props.name}</h1>    );  }}Greeting.propTypes = {  name: React.PropTypes.string};

React.PropTypes提供了一系列的检验器用来确保你的数据的合法性，比如说样例中的React.PropTypes.string，如果提供了不合法的数据，在javascript的console中会出现警告，由于性能原因，propTypes的使用一般是在测试阶段，不用在用户发布阶段。

以下是React.PropTypes的一些检验器的例子

MyComponent.propTypes = {  //这些检验器可以检验javascript的基本数据类型  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,  //任何可以被放在视图中的元素(true和DOM元素不允许)  optionalNode: React.PropTypes.node,  //为JSX对象  optionalElement: React.PropTypes.element,  // 用于限制只能输入特定的类的实例，这里就是只能是Message类的实例  optionalMessage: React.PropTypes.instanceOf(Message),  // 用于限定数据必须是枚举的数据中的一个  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  }),  // 用于限定这个属性必须存在，并且还必须是一个函数  requiredFunc: React.PropTypes.func.isRequired,  // 用于限定这个属性必须存在，可以为任何值  requiredAny: React.PropTypes.any.isRequired,  // 用于限定这个属性必须存在，可以为xxx值  requiredAny: React.PropTypes.xxx.isRequired,  //如果你想自定义检验器，如下（这是针对一个基本数据类型的属性的）  //propName是属性的名字，componentName是组件名，这个东西React会自动处理传入  customProp: function(props, propName, componentName) {    if (!/matchme/.test(props[propName])) {      return new Error(        'Invalid prop `' + propName + '` supplied to' +        ' `' + componentName + '`. Validation failed.'      );    }  },  // 如果你想自定义检验器，如下（这是针对一个数组和对象）  //propValue是props.name的值  //key是数组的索引  //componentName是组件名称  //location是本地的props对象  //propFullName是属性的全称比如name[key].  customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {    if (!/matchme/.test(propValue[key])) {      return new Error(        'Invalid prop `' + propFullName + '` supplied to' +        ' `' + componentName + '`. Validation failed.'      );    }  })};

2.defaultProps默认属性值设置

class Greeting extends React.Component {  render() {    return (      <h1>Hello, {this.props.name}</h1>    );  }}//默认属性值设置Greeting.defaultProps = {  name: 'Stranger'};//没有进行name设置，会自动进行默认属性设置ReactDOM.render(  <Greeting />,  document.getElementById('example'));

这个默认属性的设置非常有意思，可以一定程度上减少代码复杂度

下一篇将讲React中ref属性的必要性