react的類型檢查PropTypes自React v15.5起已棄用，請使用prop-types

最近使用React的類型檢查PropTypes時，遇到錯誤：TypeError: Cannot read property 'array' of undefined

看了下自己的React版本：    "react": "^16.2.0",
google搜了下，原來：react的類型檢查PropTypes自React v15.5起已棄用，請使用prop-types
使用方法參考：

https://doc.react-china.org/docs/typechecking-with-proptypes.html

 

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