propTypes 類型檢測

自 React v15.5 起，React.propTypes已移入另一個包中，需要引入prop-types庫使用。

如果沒有安裝，請執行以下命令安裝依賴：

npm install prop-types --save

引入使用：

import propTypes from 'prop-types'

簡單使用示例：

import React from 'react';
import PropTypes from 'prop-types';  // 引入prop-types庫
class Page extends React.Component {
    render() {
        return (
            <h1>數值：{this.props.count}</h1>
        )
    }
}
Page.propTypes = {
    count: PropTypes.number  // 聲明count爲number類型，如果得到的值不是number類型將會報錯
};
ReactDOM.render(
  <div>
    <Page count={"name"}/>    // 傳遞一個字符串到 props.count 
  </div>,
  document.getElementById('root')
);

上面例子中，將會報錯：

因爲類型已經聲明瞭爲number，但得到的不是期望類型number，所以報錯

tips: 出於性能考慮，propTypes只會在開發模式中才會提示類型報錯。

 

1、propType檢測原始類型：

Page.propTypes = {
    name: PropTypes.string,    // 檢測字符串類型
    status: PropTypes.bool,    // 檢測布爾類型
    grade: PropTypes.number,    // 檢測數字類型
    info: PropTypes.object,    // 檢測對象類型
    action: PropTypes.func,    // 檢測方法類型
    skill: PropTypes.array,    // 檢測數組類型
    constant: PropTypes.symbol,    // 檢測symbol類型
};

 

2、允許傳入任何可以渲染的值

node: PropTypes.node,  // 允許任何可以渲染的元素

3、允許傳入一個react元素

element: PropTypes.element,  // 允許傳入一個react元素

4、是否實例化於Test構造函數

instanceOf: PropTypes.instanceOf(Test),     // 是否實例化於Test構造函數

5、傳入的值是否其中的枚舉值

sex: PropTypes.oneOf(["男", "女"]),   // 傳入的值是否其中的枚舉值

6、傳入值類型是否其中的類型之一

typeOf: PropTypes.oneOfType([PropTypes.number,PropTypes.string,PropTypes.bool]),    // 傳入值類型是否其中的類型之一

7、傳入的值爲數組並且組元素的值爲指定的類型

arrayOf: PropTypes.arrayOf(PropTypes.number),    // 傳入的值爲數組並且組元素的值爲指定的類型

8、傳入的值爲對象，並且對象中的元素爲指定的類型

objectOf: PropTypes.objectOf(PropTypes.string),   // 傳入的值爲對象，並且對象中的元素爲指定的類型

9、傳入的值爲對象，並且如果傳入其中指定的屬性，則屬性值類型必須是指定的類型

shape: PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),  // 傳入的值爲對象，並且如果傳入其中指定的屬性，則屬性值類型必須是指定的類型

10、傳入的值爲對象，並且如果該對象有屬性，必須與指定的屬性一致，否則不傳，不能傳入其他值

exact: PropTypes.exact({color: PropTypes.string, fontSize: PropTypes.number})

11、必填字段並且需要爲指定類型值，否則會拋出錯誤

required: PropTypes.string.isRequired,

12、必填字段，沒有限制類型，任何類型的值都可以

anyRequired: PropTypes.any.isRequired,

13、設置默認值，沒有值傳入時使用默認值

Page.defaultProps = {
    name: '沒填寫名字'
}

14、自定義類型檢測

// 你可以指定一個自定義驗證器。它在驗證失敗時應返回一個 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.'
      );
    }
  })

 

 

參考文檔：react官方文檔