React 之 props校验场景和使用

props校验场景和使用

问题：对于组件来说，props是由外部传入的，该如何保证使用者传入的数据格式是正确的呢？ 来保证不会因为数据格式错误而导致组件无法使用

示例：

//列表组件
const List = (props) => {
  const listArr = props.names
  const nameItem = listArr.map((item, index) => <li key={index}>{item.name}</li>)
  return (
  		<ul>{nameItem}</ul>
	)
}

const Main = () => {
    return (
        <List names={10} />
    )
}

以上示例可以看出，List组件 names 传入参数不对，系统抛出错误而导致代码无法运行

Uncaught TypeError: listArr.map is not a function

面对这样的问题，如何解决？ 那就需要对props进行校验

一、实现步骤

1. 安装属性校验包

npm install --save prop-types  或  yarn add prop-types

2. 导入prop-types 包

import PropTypes from 'prop-types' //ES6

3. 使用 组件名.propTypes = {} 给组件添加校验规则

---

全部代码

import PropTypes from 'prop-types'

const List = (props) => {
  const listArr = props.names
  const nameItem = listArr.map((item, index) => <li key={index}>{item.name}</li>)
  return (
  		<ul>{nameItem}</ul>
	)
}

List.propTypes = {
  naems: PropTypes.array //检测数组类型
}

---

校验-规则说明

//示例：
ListComponent.propTypes = {
	optionalArray: PropTypes.array, 		//检查数组类型
  	optionalBigInt: PropTypes.bigint, 	//检查bigint类型
  	optionalBool: PropTypes.bool, 		//检查布偶值类型
  	optionalFunc: PropTypes.func,			//检查方法类型
  	optionalNumber: PropTypes.number,		//检查数组类型
  	optionalObject: PropTypes.object, 	//检查对象类型
  	optionalString: PropTypes.string, 	//检查字符串类型
  	optionalSymbol: PropTypes.symbol, 	//检查symbol类型（ES6 新引入类型）

	//任何可被渲染的元素（包括数字、字符串、元素或数组）
  	optionalNode: PropTypes.node,
	// React 元素。
  	optionalElement: PropTypes.element,
	// React 元素类型（即，ListComponent）
  	optionalElementType: PropTypes.elementType,
  	//声明 prop 为类的实例
  	optionalMessage: PropTypes.instanceOf(Message),
  	//特定的值. 例：枚举类型
  	optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  	//特定的（多个任意类型）结构的对象
 	optionalUnion: PropTypes.oneOfType([
	    PropTypes.string,
	    PropTypes.number,
	    PropTypes.instanceOf(Message)
  	]),
  	//特定的（某一类型）结构的数组
  	optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  	//特定的（某一类型）结构的对象
  	optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  	// 特定的结构对象
  	optionalObjectWithShape: PropTypes.shape({
    	color: PropTypes.string,
    	fontSize: PropTypes.number
  	}),
	// 特定的结构对象且特定参数属性类型
	 optionalObjectWithStrictShape: PropTypes.exact({
	   	name: PropTypes.string,
	   	quantity: PropTypes.number
	 }),
  	// 必填项（可以在任何 PropTypes 属性后面加上 `isRequired`）
 	requiredFunc: PropTypes.func.isRequired,
  	// 必填项不限制类型
  	requiredAny: PropTypes.any.isRequired,
  	//自定义验证器
  	customProp: function(props, propName, componentName) {
    	if(/*判断条件*/){
               return new Error(/*错误的参数*/)
           }
    	}
  	},
  	// 自定义 `arrayOf` 或 `objectOf` 验证器。
  	customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    	if(/*判断条件*/){
             return new Error(/*错误的参数*/)
       	}
  	})
}