prop-types

在 React 中我们使用 prop-types 对组件的 prop 进行类型检测。

• propTypes 能用来检测全部数据类型的变量:
  array：数组
  bool：布尔值
  func：函数
  number：数值
  object：对象
  string：字符串
  symbol：symbol类型

• 安装

npm install --save prop-types

• 使用

import Proptypes from 'prop-types';
import React, { Component } from 'react';

class SomeComponent extends Component {
    // ...组件内容
    // 里面有 value 属性 和 add subtract 方法
} 

// 1.最简单的使用
SomeComponent.proptypes = {
    value: Proptypes.number,
    add: Proptypes.func,
    subtract: Proptypes.func
}

// 2.多类型
SomeComponent.proptypes = {
    value: Proptypes.onOfType(
        [Proptypes.string, Proptypes.number]
    ),
    add: Proptypes.func,
    subtract: Proptypes.func
}

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

// 4.对象不同属性的不同类型 brandsList是一个数组类型，其每一个元素都是对象类型，分别对每个对象进行检测。
SomeComponent.propTypes = {
    brandsList: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.number.isRequired,
            name: PropTypes.string.isRequired
        }),
    ).isRequired,
    isBrandsListLoaded: PropTypes.bool.isRequired
}

// 5.必须属性 isRequired
SomeComponent.proptypes = {
    value: Proptypes.number.isRequired,
    add: Proptypes.func.isRequired,
    subtract: Proptypes.func.isRequired
}