前言
通常,我们在项目中使用自定义组件时,需要对组件的props进行类型检测。而React提供了专门的库,可以校验组件的props类型,也可以做一些特定的限制。下面行详细介绍。
以下内容大部分来自[React官网](https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper),根据我的开发经验进行了补充。
如何使用
项目中安装prop-types
npm install prop-types --save
页面引入
import PropTypes from 'prop-types';
使用
在需要加入类型校验的组件中引入prop-types,并对需要类型校验的props属性添加类型验证器。
/**
* @description Switch 开关组件
*/
import React from 'react';
import PropTypes from 'prop-types';
const Switch = ({ ...props }) => {
return <div>{props.children}</div>;
};
Switch.propTypes = {
color: PropTypes.string, // 开关颜色
loading: PropTypes.bool, // 是否为加载状态
};
export default Switch;
eslint校验
如果项目中加入了eslint校验,可以设置不强制使用prop-types,将react/prop-types项设置为0即可。
module.exports = {
rules: {
// 不强制使用prop-types
'react/prop-types': 0,
},
};
propTypes提供的验证器
原生类型
可以将属性声明为 JS 原生类型,默认情况下这些属性都是可选的。
Switch.propTypes = {
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
};
任何可被渲染的元素
包括数字、字符串、元素、数组、Fragment等。
Switch.propTypes = {
optionalNode: PropTypes.node,
};
一个 React 元素
React 元素,指React.CreateElement生成的元素。
可以通过 PropTypes.element 来确保传递给组件的 children 中只包含一个元素。
/**
* @description Switch 开关
*/
import React from 'react';
import PropTypes from 'prop-types';
const Switch = ({ ...props }) => {
// 这必须只有一个元素,否则控制台会打印警告。
const children = props.children;
return <div>{children}</div>;
};
Switch.propTypes = {
children: PropTypes.element,
};
export default Switch;
多种类型
一个对象可以是几种类型中的任意一个类型。
方法oneOfType接收的参数是数组,设置的不同类型用逗号分开。
Switch.propTypes = {
optionalUnion: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
限定值
可以让 props只能是特定的值,指定它为枚举类型.
方法oneOf接收的参数是数组,设置的特定值用逗号分开。
Switch.propTypes = {
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
};
类的实例
使用JS 的 instanceof 操作符声明 prop 为类的实例。
注:指定的类不能是自定义的React类。
// 正确代码
Switch.propTypes = {
optionalArray: PropTypes.instanceOf(Array),
};
// 报错代码
// 指定的类不能是自定义的React类,否则代码会报错:Invalid prop `optionalArray` of type `Object` supplied to `Loading`, expected instance of `Custom`.
Switch.propTypes = {
optionalArray: PropTypes.instanceOf(Custom),
};
参数必传限制
如果想设置某项prop为必须的,可以在任何 PropTypes 属性后面加上 `isRequired`,这个 prop 没有被提供时,会打印警告信息。
Switch.propTypes = {
requiredFunc: PropTypes.func.isRequired,
};
任意类型
也可以设置任意类型,使用any声明任意类型。
实际开发中声明任意的意义不大,因为propTypes本身就是非必须的,声明任意和不做任何声明是一样的。但是有些情况,我们又想给某些参数设置必填校验,但是这类参数的校验类型又不想设置的特别局限,就可以把any和isRequired结合使用,这种组合校验在实际开发中也经常用到。
// 任意类型
Switch.propTypes = {
optionalAny: PropTypes.any,
};
// 任意类型的必需数据
Switch.propTypes = {
requiredAny: PropTypes.any.isRequired,
};
其他类型
以下几种类型我日常用到的相对较少,所以直接将React文档里的内容复制出来。如果有大佬愿意分享,欢迎留言
标签:验证,prop,React,Switch,PropTypes,类型,propTypes From: https://blog.51cto.com/u_15838863/5849279