propTypes 类型检测

最新推荐文章于 2022-11-16 17:42:32 发布

原创最新推荐文章于 2022-11-16 17:42:32 发布 · 771 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了React中propTypes的使用，包括如何安装、基本用法和各种类型检测，如原始类型、React元素、实例检查、枚举值、数组、对象等。同时强调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官方文档