React中的propTypes

    在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查系统不会给与提示，但是有了类型检查以后，再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。

   首先，在React V15.5以前propTypes是集成在React中的，它使用的是react内置的类型检测，而不是第三方库（也就是说我们现在的prop-types是当初以react内置的PropTypes对象为基础分离出来的。React V15.5之后的版本是利用props-types这个独立的第三方库来进行类型检测的。

所以现在我们要用应该先引入第三方库：

//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';

propTypes可以检测的类型：

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

class定义中使用方法

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

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

ES7中使用方法示例

class Greeting extends React.Component {
  //如果没有传递该属性时的默认值
  static defaultProps = {
    name: 'stranger'
  }
  //如果传递该属性，该属性值必须为字符串
  static propTypes={
    name:PropTypes.string
  }
  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

使用isRequired设置属性为必须传递的值

 static propTypes={
    name:PropTypes.string.isRequired
  }

arrOf和objectOf多重嵌套类型检测

  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 
  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  //示例
  static propTypes = {
        todoList:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.string.isRequired,
            text:PropTypes.string
        }))
    }

shape检测不同对象的不同属性的不同数据类型

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
  //示例
  static propTypes = {
     object:PropTypes.shape({
         name:PropTypes.string,
         age:PropTypes.number
      })
 }