注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。

随着你的应用的开发，你会使用类型检查的方法来捕获很多bug。对于一些应用，你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查。但是即使你不是用这些扩展语言，React也有一些内置的类型检查功能。在props上运行类型检查，你可以指派特殊的propTypes属性：

import PropTypes from 'prop-types';

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

PropTypes导出一系列验证工具可以确保你接收到的数据是有效的。在这个例子里，我们使用PropTypes.string。当一个无效的值被作为prop提供时，一个警告就会出现在js控制台里。因为性能的原因，propTypes只是在开发环境里来使用。

PropTypes

下面是一个不同验证器的例子：

import PropTypes from 'prop-types';MyComponent.propTypes = {  // 你可以将属性声明为以下 JS 原生类型  optionalArray: PropTypes.array,  optionalBool: PropTypes.bool,  optionalFunc: PropTypes.func,  optionalNumber: PropTypes.number,  optionalObject: PropTypes.object,  optionalString: PropTypes.string,  optionalSymbol: PropTypes.symbol,  // 任何可被渲染的元素（包括数字、字符串、子元素或数组）。  optionalNode: PropTypes.node,  // 一个 React 元素  optionalElement: PropTypes.element,  // 你也可以声明属性为某个类的实例，这里使用 JS 的  // instanceof 操作符实现。  optionalMessage: PropTypes.instanceOf(Message),  // 你也可以限制你的属性值是某个特定值之一  optionalEnum: PropTypes.oneOf(['News', 'Photos']),  // 限制它为列举类型之一的对象  optionalUnion: PropTypes.oneOfType([    PropTypes.string,    PropTypes.number,    PropTypes.instanceOf(Message)  ]),  // 一个指定元素类型的数组  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),  // 一个指定类型的对象  optionalObjectOf: PropTypes.objectOf(PropTypes.number),  // 一个指定属性及其类型的对象  optionalObjectWithShape: PropTypes.shape({    color: PropTypes.string,    fontSize: PropTypes.number  }),  // 你也可以在任何 PropTypes 属性后面加上 `isRequired`   // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息  requiredFunc: PropTypes.func.isRequired,  // 任意类型的数据  requiredAny: PropTypes.any.isRequired,  // 你也可以指定一个自定义验证器。它应该在验证失败时返回  // 一个 Error 对象而不是 `console.warn` 或抛出异常。  // 不过在 `oneOfType` 中它不起作用。  customProp: function(props, propName, componentName) {    if (!/matchme/.test(props[propName])) {      return new Error(        'Invalid prop `' + propName + '` supplied to' +        ' `' + componentName + '`. Validation failed.'      );    }  },  // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf`   // 验证器，它应该在验证失败时返回一个 Error 对象。 它被用  // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组  // 或对象本身，第二个是它们对应的键。  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {    if (!/matchme/.test(propValue[key])) {      return new Error(        'Invalid prop `' + propFullName + '` supplied to' +        ' `' + componentName + '`. Validation failed.'      );    }  })};

限制单个子元素

通过PropTypes.element你可以指定只能有一个子元素被作为children传递给一个组件。

import PropTypes from 'prop-types';

class MyComponent extends React.Component {  render() {    // This must be exactly one element or it will warn.    const children = this.props.children;    return (      
     
              {children}      
     
    );  }}MyComponent.propTypes = {  children: PropTypes.element.isRequired};

默认prop值

你可以定义props的默认值通过分配特殊的defaultProps属性：

class Greeting extends React.Component {  render() {    return (      
Hello, {
   this.props.name}
    );  }}// 为属性指定默认值Greeting.defaultProps = {  name: 'Stranger'};// 渲染"Hello, Stranger":ReactDOM.render(  
     ,  document.getElementById('example'));

如果你在使用像 transform-class-properties 的 Babel 转换器，你也可以在React 组件类中声明 defaultProps 作为静态属性。这个语法还没有最终通过，在浏览器中需要一步编译工作。更多信息，查看类字段提议。

class Greeting extends React.Component {  static defaultProps = {    name: 'stranger'  }  render() {    return (      
      
       Hello, {
    this.props.name}
      
    )  }}

defaultProps会确保this.props.name将会有一个值如果它没有被父组件所指定。propTypes类型检查会在defaultProps解决了之后执行，因此defaultProps也会应用。