Props 驗證使用 propTypes，它可以保證我們的應用元件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入資料是否有效。當向 props 傳入無效資料時，JavaScript 控制檯會丟擲警告。

常見的驗證器：

    React.createClass({
      propTypes: {
        // 可以宣告 prop 為指定的 JS 基本資料型別，預設情況，這些資料是可選的
        optionalArray: React.PropTypes.array,
        optionalBool: React.PropTypes.bool,
        optionalFunc: React.PropTypes.func,
        optionalNumber: React.PropTypes.number,
        optionalObject: React.PropTypes.object,
        optionalString: React.PropTypes.string,
     
        // 可以被渲染的物件 numbers, strings, elements 或 array
        optionalNode: React.PropTypes.node,
     
        //  React 元素
        optionalElement: React.PropTypes.element,
     
        // 用 JS 的 instanceof 操作符宣告 prop 為類的例項。
        optionalMessage: React.PropTypes.instanceOf(Message),
     
        // 用 enum 來限制 prop 只接受指定的值。
        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),
     
        // 特定 shape 引數的物件
        optionalObjectWithShape: React.PropTypes.shape({
          color: React.PropTypes.string,
          fontSize: React.PropTypes.number
        }),
     
        // 任意型別加上 `isRequired` 來使 prop 不可空。
        requiredFunc: React.PropTypes.func.isRequired,
     
        // 不可空的任意型別
        requiredAny: React.PropTypes.any.isRequired,
     
        // 自定義驗證器。如果驗證失敗需要返回一個 Error 物件。不要直接使用 `console.warn` 或拋異常，
        // 因為這樣 `oneOfType` 會失效。
        customProp: function(props, propName, componentName) {
          if (!/matchme/.test(props[propName])) {
            return new Error('Validation failed!');
          }
        }
      }
    });
 

注意: React.PropTypes 自 React v15.5 起已棄用。請使用 prop-types 庫代替。

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.'
      );
    }
  })
};
 

來源：https://segmentfault.com/a/1190000010921839