React:propTypes

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

在React中，随着项目复杂度的增加，我们难免会遇到一些和类型相关的bug。React提供了一套用于类型检测（针对组件的props）的工具，并在版本15.5之后独立出来作为插件，只在开发模式下使用。因此我们可以不需要用到flow或typescript这类JS扩展语言。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
//定义完组件之后，对其propTypes进行设置。
Greeting.propTypes = {
  name: PropTypes.string
};

常见的类型：

MyComponent.propTypes = {
  // You can declare that a prop is a specific JS primitive. By default, these
  // are all optional.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types.
  optionalNode: PropTypes.node,

  // A React element.
  optionalElement: PropTypes.element,

  // You can also declare that a prop is an instance of a class. This uses
  // JS's instanceof operator.
  optionalMessage: PropTypes.instanceOf(Message),
  //...
}

更多的类型在：https://facebook.github.io/react/docs/typechecking-with-proptypes.html#proptypes

设置默认值：

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

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

这部分没什么好讲的。我们引入propTypes后，可以给自定义类的.propTypes赋值，这个值是一个对象形式的校验器，里面对类的props的各个属性设置了有效类型。之后如果我们传入的值不是有效类型，则控制台会发出警告，帮助我们避免类型错误。