注意:
React v 15.5からReact.PropTypesは他のパケットに移動しました.代わりにprop-typesライブラリを使ってください.
自動変換を行うためのcodemodスクリプトを提供します.
あなたのアプリケーションがどんどん増えていくにつれて、多くのエラーがタイプ検査で捕獲できます.いくつかのアプリケーションに対しては、FlowやType ScriptなどJavaScript拡張を使って、アプリケーション全体をタイプチェックすることができます.これらの拡張機能を使わなくても、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値タイプが正しくない場合、JavaScriptコンソールは警告を表示します.性能の観点から、propTypesは開発モードでのみ検査を行う.
PropType
異なるベリファイアを使用する例を以下に示す.

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,

  //          （    、   、     ）
  // (  Fragment)        。
  optionalNode: PropTypes.node,

  //    React   。
  optionalElement: PropTypes.element,

  //    React     （ ，MyComponent）。
  optionalElementType: PropTypes.elementType,

  //        prop      ，    
  // JS   instanceof    。
  optionalMessage: PropTypes.instanceOf(Message),

  //        prop        ，    
  //     。
  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
  }),

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   

  //        PropTypes        `isRequired` ，  
  //    prop       ，       。
  requiredFunc: PropTypes.func.isRequired,

  //        
  requiredAny: PropTypes.any.isRequired,

  //              。             Error   。
  //       `console.warn`      ，     `onOfType`       。
  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を通して、コンポーネントに伝達されるチルドレンには一つの要素しか含まれていないことを確認しても良い.

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    //          ，          。
    const children = this.props.children;
    return (
      

        {children}
      
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

標準Prop値
特定のdefaultProps属性を設定することによって、propsのデフォルト値を定義することができます.

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

//    props     ：
Greeting.defaultProps = {
  name: 'Stranger'
};

//     "Hello, Stranger"：
ReactDOM.render(
  ,
  document.getElementById('example')
);

もしあなたがtranform-class-propertiesのBabel変換ツールを使っているなら、Reactコンポーネントクラスでも静的属性としてdefaultPropsを宣言することができます.この文法案は最終的に決まっていません.コンパイルをしてからブラウザで実行します.もっと多くの情報を知りたいなら、class fields proposalを見てください.

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      
Hello, {this.props.name}
    )
  }
}

defaultPropsは、親コンポーネントがその値を指定していない場合に、デフォルト値があることを確認するために使用される.this.props.nameタイプの検査はpropTypesによって与えられた値の後に行われるので、タイプチェックもdefaultPropsに適用される.
原文のリンク:https://react.docschina.org/docs/typechecking-with-proptypes.html