您现在的位置是：网站首页> 编程资料编程资料

React和Vue的props验证示例详解_React_

2023-05-24 302人已围观

简介 React和Vue的props验证示例详解_React_

PropTypes.oneOfType
PropTypes.arrayOf
PropTypes.objectOf
PropTypes.shape
PropTypes.node
vue数据验证：通过变量名：具体类型的方法
vue数据验证：带有默认值的方式验证
通过required设置必须属性
多种类型中的一种
对象数组验证，并且数组元素是特定属性的对象
自定义验证函数

Vue中的props验证

为什么要使用props校验？

使用props校验有两个好处：

1、可以很清晰的知道组件中属性的类型以及哪些属性是必需的

2、传递的数据出现错误时会报错，可以很容易定位问题

本文将会提供React和vue中的数据校验方法和示例。

React中的props校验

react中使用propTypes来对props进行校验。通过defaultProps可以设置默认值，通过propTypes可以规定属性的类型。

基本使用示例：

import React from "react"; // 引入PropTypes import PropTypes from 'prop-types' export default class Child extends React.Component { constructor(props) { super(props) } render() { return ( 
 ) } } // 规定属性的类型-将propTypes设置成一个类构造函数属性 Child.propTypes={ } // 设置默认值 Child.defaultProps = { }

react中单一类型校验器

可以通过PropTypes对string(字符串)、number（数字或者是可以被解析成数字的值）、bool（布尔）、object(对象)、array(数组)、func(函数)类型进行校验

设定属性类型和默认值

使用示例：

// 规定属性的类型-将propTypes设置成一个类构造函数属性 Child.propTypes = { arrValue: PropTypes.array,//数组类型 boolValue: PropTypes.bool,//布尔类型 funcValue: PropTypes.func,//函数类型 numValue: PropTypes.number,//数字类型 objValue: PropTypes.object,//对象类型 strValue: PropTypes.string,//字符串类型 } // 设置默认值 Child.defaultProps = { arrValue: [1, 2], boolValue: false, numValue: 0, objValue: { name: 'lisi' }, strValue: '123' }

不传递参数的情况（会使用设置的默认值）：

父类：

import React from "react"; import Child from './Child' export default class PropsDemo extends React.Component { constructor(props) { super(props) this.print = this.print.bind(this) } print() { console.log('打印日志') } render() { return ( 
 ) } }

子类：

import React from "react"; // 引入PropTypes import PropTypes from 'prop-types' export default class Child extends React.Component { printData() { this.props.funcValue() } render() { const { arrValue, boolValue, numValue, objValue, strValue } = this.props return ( {arrValue.join(',')}
布尔类型
学生信息：{`${objValue.name}-${objValue.age}`}
得分：{numValue}
备注:{strValue}
 ) } } // 规定属性的类型-将propTypes设置成一个类构造函数属性 Child.propTypes = { arrValue: PropTypes.array,//数组类型 boolValue: PropTypes.bool,//布尔类型 funcValue: PropTypes.func,//函数类型 numValue: PropTypes.number,//数字类型 objValue: PropTypes.object,//对象类型 strValue: PropTypes.string,//字符串类型 } // 设置默认值 Child.defaultProps = { arrValue: [1, 2], boolValue: false, numValue: 60, objValue: { name: 'lisi', age: 20 }, strValue: 'xxx' }

传递参数（使用传递的值）

import React from "react"; import Child from './Child' export default class PropsDemo extends React.Component { constructor(props) { super(props) this.print = this.print.bind(this) } print() { console.log('打印日志') } render() { const arrValue = [3, 4, 5] const boolValue = true const numValue = 88 const objValue = { name: '王五', age: 22 } const strValue = '优秀' return ( 
 ) } }

设置必需属性

通过isRequired可以设定属性是必需的，如果父组件没有传递，并且也没有默认值时就会有报错提醒。

注释strValue的传递

设置strValue为必需属性，并注释默认值的设置

Child.propTypes = { arrValue: PropTypes.array,//数组类型 boolValue: PropTypes.bool,//布尔类型 funcValue: PropTypes.func,//函数类型 numValue: PropTypes.number,//数字类型 objValue: PropTypes.object,//对象类型 strValue: PropTypes.string.isRequired,//字符串类型 } // 设置默认值 Child.defaultProps = { arrValue: [1, 2], boolValue: false, numValue: 60, objValue: { name: 'lisi', age: 20 }, // strValue: 'xxx' }

运行代码：

放开刚刚注释掉的默认值设置，发现不在报错。

Child.propTypes = { arrValue: PropTypes.array,//数组类型 boolValue: PropTypes.bool,//布尔类型 funcValue: PropTypes.func,//函数类型 numValue: PropTypes.number,//数字类型 objValue: PropTypes.object,//对象类型 strValue: PropTypes.string.isRequired,//字符串类型 } // 设置默认值 Child.defaultProps = { arrValue: [1, 2], boolValue: false, numValue: 60, objValue: { name: 'lisi', age: 20 }, strValue: 'xxx' }

放开刚刚注释掉的传递strValue设置，发现也不会报错

react中组合类型校验器

组合类型的校验器有如下几种：

oneOfType：属性必须是指定的一组类型中的一种

arrayOf：属性必须是由指定元素组成的数组

objectOf：属性必须是一个带有指定类型值的属性值的对象，也就是说对象必须要有一个指定类型的属性

shape:属性必须是一个符合特定格式的对象，它需要拥有同一组属性。

node：属性必须是一个可以渲染的值：数字，字符串，元素或数组

element：属性必须是一个React元素

instanceOf：属性必须是指定类的实例

oneOf：确保属性被限制为一组枚举值中的一项

PropTypes.oneOfType

父类：

 const dataValue1 = '测试'//字符串 const dataValue2 = 234//数字 const dataValue3 = { name: '王五' }//非字符串和数字 return ( 
 )

子类：

import React from "react"; // 引入PropTypes import PropTypes from 'prop-types' export default class Child extends React.Component { componentDidMount() { console.log('dataValue3:', this.props.dataValue3) } render() { return ( dataValue1:{this.props.dataValue1}
dataValue1:{this.props.dataValue2}
 ) } } // 规定属性的类型-将propTypes设置成一个类构造函数属性 Child.propTypes = { dataValue1: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), dataValue2: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), dataValue3: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]) }

可以看到dataValue1和dataValue2都是规定类型中的一种，可以正常使用；而dataValue3传递的不是规定的类型，就有提醒。

PropTypes.arrayOf

父类：

 render() { const dataValue1 = [1, 2, 3, 4]//元素是number类型 const dataValue2 = ['1', '2', '3', '4']//元素是string类型 return ( 
 ) }

子类：

import React from "react"; // 引入PropTypes import PropTypes from 'prop-types' export default class Child extends React.Component { render() { return ( dataValue1:{this.props.dataValue1.join(',')}
dataValue1:{this.props.dataValue2.join(',')}
 ) } } // 规定属性的类型-将propTypes设置成一个类构造函数属性 Child.propTypes = { dataValue1: PropTypes.arrayOf(PropTypes.number), dataValue2: PropTypes.arrayOf(PropTypes.number), }

可以看到数组元素是number时就不没有错误提示，但是数组元素不是number时就会有错误提示。

PropTypes.objectOf

父类：

 render() { const dataValue1 = { value1: 1, value2: 2, value3: 3 } const dataValue2 = { value1: "1", value2: "2", value3: "3" } return ( 
 ) }

子类：

import React from "react"; // 引入PropTypes import PropTypes from 'prop-types' export default class Child extends React.Component { getValueStr(obj) { let str = '' for (const key in obj) { str = `${str}${obj[key]},` } return str } render() { const { dataValue1, dataValue2 } = this.props const dataValue1Str = this.getValueStr(dataValue1) const dataVal
                提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：vue中data的基础汇总_vue.js_
                                                                下一篇：关于react中列表渲染的局部刷新问题_React_