prop-types

在react中我们使用prop-types对组件的prop进行类型检测。接下来就来看一下怎么用它。

安装

npm install --save prop-types

最简单使用

import PropTypes from 'prop-types';
const Auth = ({ match, isLoggedIn }) => {
    //组件
};
Auth.propTypes = {
  match: PropTypes.object, 
  isLoggedIn: PropTypes.bool,
};

以上是最基本的检测方法，propTypes 能用来检测全部数据类型的变量：

• array：数组

• bool：布尔值

• func：函数

• number：数值

• object：对象

• string：字符串

• symbol：symbol类型

支持多类型

如果一个prop需要支持两种类型怎么办，可以使用oneOfType实现。

Auth.propTypes = {
       number:PropTypes.oneOfType(
           [PropTypes.string,PropTypes.number]
       )
}

支持多个值

我们也可以用oneOf指定多个变量值，注意别和oneOfType搞混了。

Auth.propTypes = {
       number:PropTypes.oneOfType(
           [12,24,35]
       )
}

嵌套

如果要检测数组中的元素，或者对象中的属性。需要用到arrayOf和objectOf方法。

//检测prop为一个数组，元素为数值
Auth.propTypes = {
       array:PropTypes.arrayOf(PropTypes.number)
}

检测对象不同属性的不同类型

brandsList是一个数组类型，其每一个元素都是对象类型，分别对每个对象进行检测。

Auth.propTypes = {
    brandsList: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.number.isRequired,
        name: PropTypes.string.isRequired,
        keywords: PropTypes.string.isRequired,
        excludeKeywords: PropTypes.string,
        sites: PropTypes.string.isRequired,
        status: PropTypes.string,
      }),
    ).isRequired,
    isBrandsListLoaded: PropTypes.bool.isRequired
}

必须属性

我们还可以用isRequired定义一个变量是必须的。

Auth.propTypes = {
  match: PropTypes.object.isRequired, 
  isLoggedIn: PropTypes.bool.isRequired,
};