PropTypes 校驗神器，讓你的寫的bug越來越少！

注意：

自 React v15.5 起，React.PropTypes 已移入另一個包中。請使用 prop-types 庫 代替。

我們提供了一個 codemod 腳本來做自動轉換。

隨着你的應用程序不斷增長，你可以通過類型檢查捕獲大量錯誤。對於某些應用程序來說，你可以使用 Flow 或 TypeScript 等 JavaScript 擴展來對整個應用程序做類型檢查。但即使你不使用這些擴展，React 也內置了一些類型檢查的功能。要在組件的 props 上進行類型檢查，你只需配置特定的 propTypes 屬性：

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string
};

PropTypes 提供一系列驗證器，可用於確保組件接收到的數據類型是有效的。在本例中, 我們使用了 PropTypes.string。當傳入的 prop 值類型不正確時，JavaScript 控制檯將會顯示警告。出於性能方面的考慮，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,

  // 任何可被渲染的元素（包括數字、字符串、元素或數組）
  // (或 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 來確保傳遞給組件的 children 中只包含一個元素。

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // 這必須只有一個元素，否則控制檯會打印警告。
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

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

默認 Prop 值

您可以通過配置特定的 defaultProps 屬性來定義 props 的默認值：

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

// 指定 props 的默認值：
Greeting.defaultProps = {
  name: 'Stranger'
};

// 渲染出 "Hello, Stranger"：
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

如果你正在使用像 transform-class-properties 的 Babel 轉換工具，你也可以在 React 組件類中聲明 defaultProps 作爲靜態屬性。此語法提案還沒有最終確定，需要進行編譯後才能在瀏覽器中運行。要了解更多信息，請查閱 class fields proposal。

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

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

defaultProps 用於確保 this.props.name 在父組件沒有指定其值時，有一個默認值。propTypes 類型檢查發生在 defaultProps 賦值後，所以類型檢查也適用於 defaultProps。

原文鏈接：https://react.docschina.org/docs/typechecking-with-proptypes.html