React和Vue的props驗證示例詳解
更新時間：2022年08月04日 14:38:32 作者：Celester_best
這篇文章主要介紹了React和Vue的props驗證,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
為什么要使用props校驗？
使用props校驗有兩個好處：
1、可以很清晰的知道組件中屬性的類型以及哪些屬性是必需的
2、傳遞的數(shù)據(jù)出現(xiàn)錯誤時會報錯，可以很容易定位問題
本文將會提供React和vue中的數(shù)據(jù)校驗方法和示例。
React中的props校驗
react中使用propTypes來對props進(jìn)行校驗。通過defaultProps可以設(shè)置默認(rèn)值，通過propTypes可以規(guī)定屬性的類型。
基本使用示例：
import React from "react";
// 引入PropTypes
import PropTypes from 'prop-types'
export default class Child extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div></div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes={
}
// 設(shè)置默認(rèn)值
Child.defaultProps = {
}react中單一類型校驗器
可以通過PropTypes對string(字符串)、number（數(shù)字或者是可以被解析成數(shù)字的值）、bool（布爾）、object(對象)、array(數(shù)組)、func(函數(shù))類型進(jìn)行校驗
設(shè)定屬性類型和默認(rèn)值
使用示例：
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes = {
arrValue: PropTypes.array,//數(shù)組類型
boolValue: PropTypes.bool,//布爾類型
funcValue: PropTypes.func,//函數(shù)類型
numValue: PropTypes.number,//數(shù)字類型
objValue: PropTypes.object,//對象類型
strValue: PropTypes.string,//字符串類型
}
// 設(shè)置默認(rèn)值
Child.defaultProps = {
arrValue: [1, 2],
boolValue: false,
numValue: 0,
objValue: {
name: 'lisi'
},
strValue: '123'
}不傳遞參數(shù)的情況（會使用設(shè)置的默認(rèn)值）：
父類：
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 (
<div>
<Child></Child>
</div >
)
}
}子類：
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 (
<div>
<div>{arrValue.join(',')}</div>
<div style={{ color: boolValue ? '#00ffff' : '#ff7f50' }}>布爾類型</div>
<div>學(xué)生信息：{`${objValue.name}-${objValue.age}`}</div>
<div>得分：{numValue}</div>
<div>備注:{strValue}</div>
<button onClick={this.printData.bind(this)}>打印</button>
</div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes = {
arrValue: PropTypes.array,//數(shù)組類型
boolValue: PropTypes.bool,//布爾類型
funcValue: PropTypes.func,//函數(shù)類型
numValue: PropTypes.number,//數(shù)字類型
objValue: PropTypes.object,//對象類型
strValue: PropTypes.string,//字符串類型
}
// 設(shè)置默認(rèn)值
Child.defaultProps = {
arrValue: [1, 2],
boolValue: false,
numValue: 60,
objValue: {
name: 'lisi',
age: 20
},
strValue: 'xxx'
}
傳遞參數(shù)（使用傳遞的值）
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 = '優(yōu)秀'
return (
<div>
<Child
arrValue={arrValue}
boolValue={boolValue}
numValue={numValue}
objValue={objValue}
funcValue={this.print}
strValue={strValue}
></Child>
</div >
)
}
}
設(shè)置必需屬性
通過isRequired可以設(shè)定屬性是必需的，如果父組件沒有傳遞，并且也沒有默認(rèn)值時就會有報錯提醒。
注釋strValue的傳遞
<Child
arrValue={arrValue}
boolValue={boolValue}
numValue={numValue}
objValue={objValue}
funcValue={this.print}
// strValue={strValue}
></Child>設(shè)置strValue為必需屬性，并注釋默認(rèn)值的設(shè)置
Child.propTypes = {
arrValue: PropTypes.array,//數(shù)組類型
boolValue: PropTypes.bool,//布爾類型
funcValue: PropTypes.func,//函數(shù)類型
numValue: PropTypes.number,//數(shù)字類型
objValue: PropTypes.object,//對象類型
strValue: PropTypes.string.isRequired,//字符串類型
}
// 設(shè)置默認(rèn)值
Child.defaultProps = {
arrValue: [1, 2],
boolValue: false,
numValue: 60,
objValue: {
name: 'lisi',
age: 20
},
// strValue: 'xxx'
}運行代碼：
放開剛剛注釋掉的默認(rèn)值設(shè)置，發(fā)現(xiàn)不在報錯。
Child.propTypes = {
arrValue: PropTypes.array,//數(shù)組類型
boolValue: PropTypes.bool,//布爾類型
funcValue: PropTypes.func,//函數(shù)類型
numValue: PropTypes.number,//數(shù)字類型
objValue: PropTypes.object,//對象類型
strValue: PropTypes.string.isRequired,//字符串類型
}
// 設(shè)置默認(rèn)值
Child.defaultProps = {
arrValue: [1, 2],
boolValue: false,
numValue: 60,
objValue: {
name: 'lisi',
age: 20
},
strValue: 'xxx'
}
放開剛剛注釋掉的傳遞strValue設(shè)置，發(fā)現(xiàn)也不會報錯
<Child
arrValue={arrValue}
boolValue={boolValue}
numValue={numValue}
objValue={objValue}
funcValue={this.print}
strValue={strValue}
></Child>
react中組合類型校驗器
組合類型的校驗器有如下幾種：
oneOfType：屬性必須是指定的一組類型中的一種
arrayOf：屬性必須是由指定元素組成的數(shù)組
objectOf：屬性必須是一個帶有指定類型值的屬性值的對象，也就是說對象必須要有一個指定類型的屬性
shape:屬性必須是一個符合特定格式的對象，它需要擁有同一組屬性。
node：屬性必須是一個可以渲染的值：數(shù)字，字符串，元素或數(shù)組
element：屬性必須是一個React元素
instanceOf：屬性必須是指定類的實例
oneOf：確保屬性被限制為一組枚舉值中的一項
PropTypes.oneOfType
父類：
const dataValue1 = '測試'//字符串
const dataValue2 = 234//數(shù)字
const dataValue3 = { name: '王五' }//非字符串和數(shù)字
return (
<div>
<Child
dataValue1={dataValue1}
dataValue2={dataValue2}
dataValue3={dataValue3}
></Child>
</div >
)子類：
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 (
<div>
<div>dataValue1:{this.props.dataValue1}</div>
<div>dataValue1:{this.props.dataValue2}</div>
</div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
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都是規(guī)定類型中的一種，可以正常使用；而dataValue3傳遞的不是規(guī)定的類型，就有提醒。
PropTypes.arrayOf
父類：
render() {
const dataValue1 = [1, 2, 3, 4]//元素是number類型
const dataValue2 = ['1', '2', '3', '4']//元素是string類型
return (
<div>
<Child
dataValue1={dataValue1}
dataValue2={dataValue2}
></Child>
</div >
)
}子類：
import React from "react";
// 引入PropTypes
import PropTypes from 'prop-types'
export default class Child extends React.Component {
render() {
return (
<div>
<div>dataValue1:{this.props.dataValue1.join(',')}</div>
<div>dataValue1:{this.props.dataValue2.join(',')}</div>
</div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes = {
dataValue1: PropTypes.arrayOf(PropTypes.number),
dataValue2: PropTypes.arrayOf(PropTypes.number),
}
可以看到數(shù)組元素是number時就不沒有錯誤提示，但是數(shù)組元素不是number時就會有錯誤提示。
PropTypes.objectOf
父類：
render() {
const dataValue1 = {
value1: 1,
value2: 2,
value3: 3
}
const dataValue2 = {
value1: "1",
value2: "2",
value3: "3"
}
return (
<div>
<Child
dataValue1={dataValue1}
dataValue2={dataValue2}
></Child>
</div >
)
}子類：
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 dataValue2Str = this.getValueStr(dataValue2)
return (
<div>
<div>dataValue1:{dataValue1Str}</div>
<div>dataValue1:{dataValue2Str}</div>
</div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes = {
dataValue1: PropTypes.objectOf(PropTypes.number),
dataValue2: PropTypes.objectOf(PropTypes.number),
}
PropTypes.shape
父類：
render() {
const dataValue1 = {
name: '張三',
age: 20
}
const dataValue2 = {
name: '張三',
age: "20"http://age不傳遞number類型
}
const dataValue3 = {
name: '張三',//少傳遞一個屬性
}
const dataValue4 = {
name: '張三',
age: 20,
num: 88,//多傳遞一個屬性
}
return (
<div>
<Child
dataValue1={dataValue1}
dataValue2={dataValue2}
dataValue3={dataValue3}
dataValue4={dataValue4}
></Child>
</div >
)
}
子類：
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, dataValue3, dataValue4 } = this.props
const dataValue1Str = this.getValueStr(dataValue1)
const dataValue2Str = this.getValueStr(dataValue2)
const dataValue3Str = this.getValueStr(dataValue3)
const dataValue4Str = this.getValueStr(dataValue4)
return (
<div>
<div>dataValue1:{dataValue1Str}</div>
<div>dataValue2:{dataValue2Str}</div>
<div>dataValue3:{dataValue3Str}</div>
<div>dataValue4:{dataValue4Str}</div>
</div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes = {
dataValue1: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
}),
dataValue2: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
}),
dataValue13: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
}),
dataValue14: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
}),
}
由此可見，缺少屬性或者增加屬性都不會有錯誤提醒，但是如果傳遞的屬性類型跟預(yù)定的不一致就會有錯誤提醒。
PropTypes.node
父組件：
render() {
const dataValue1 = 123//數(shù)字
const dataValue2 = '張三'//字符串
const dataValue3 = [1, 2, 3]
const dataValue4 = {//對象
name: '張三',
age: 20,
num: 88,
}
return (
<div>
<Child
dataValue1={dataValue1}
dataValue2={dataValue2}
dataValue3={dataValue3}
dataValue4={dataValue4}
></Child>
</div >
)
}子組件：
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, dataValue3, dataValue4, } = this.props
const dataValue4Str = this.getValueStr(dataValue4)
return (
<div>
<div>dataValue1:{dataValue1}</div>
<div>dataValue2:{dataValue2}</div>
<div>dataValue3:{dataValue3.join(',')}</div>
<div>dataValue4:{dataValue4Str}</div>
</div>
)
}
}
// 規(guī)定屬性的類型-將propTypes設(shè)置成一個類構(gòu)造函數(shù)屬性
Child.propTypes = {
dataValue1: PropTypes.node,
dataValue2: PropTypes.node,
dataValue3: PropTypes.node,
dataValue4: PropTypes.node,
}
可以看到當(dāng)預(yù)定屬性為PropTypes.node類型時，可以傳遞數(shù)字，字符串，數(shù)組，但是傳遞對象類型時就會有報錯提示。注意PropTypes.node類型并不僅僅局限于數(shù)字，字符串，數(shù)組，還可以是其他任何可渲染的元素。
Vue中的props驗證
vue中可以對如下類型進(jìn)行檢查：String、Number、Boolean、Array、Object、Date、Function、Symbol以及自定義類型。
vue數(shù)據(jù)驗證：通過變量名：具體類型的方法
父組件：
<template>
<div>
<PropsChildDemo
:name="name"
:age="age"
:obj="obj"
:obj2="obj2"
></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
name: "張三",
age: 20,
obj: {
name: "李四",
age: 21,
},
obj2: {
func: function () {
console.log("打印");
},
},
};
},
};
</script>子組件：
<template>
<div>
<div>姓名：{{ name }}</div>
<div>年齡：{{ age }}</div>
<div>姓名：{{ obj.name }}；年齡：{{ obj.age }}</div>
<button @click="obj2.func">打印</button>
</div>
</template>
<script>
export default {
name: "PropsChildDemo",
components: {},
props: {
name: String,//直接說明name為String類型
age: Number,
obj: Object,
obj2: {
func: Function,
},
},
data() {
return {};
},
methods: {},
};
</script>
vue數(shù)據(jù)驗證：帶有默認(rèn)值的方式驗證
vue中設(shè)置默認(rèn)值是使用default屬性，此時設(shè)置數(shù)據(jù)類型時需要使用type屬性
<template>
<div>
<PropsChildDemo :obj2="obj2"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
name: "張三",
age: 20,
obj: {
name: "李四",
age: 21,
},
obj2: {
func: function () {
console.log("打印");
},
},
};
},
};
</script><template>
<div>
<div>姓名：{{ name }}</div>
<div>年齡：{{ age }}</div>
<div>姓名：{{ obj.name }}；年齡：{{ obj.age }}</div>
<button @click="obj2.func">打印</button>
</div>
</template>
<script>
export default {
name: "PropsChildDemo",
components: {},
props: {
name: {
// 設(shè)置類型
type: String,
// 設(shè)置默認(rèn)值
default: "XXX",
},
age: {
type: Number,
default: 0,
},
obj: {
type: Object,
// 注意：對象和數(shù)組的默認(rèn)值必須從一個工廠函數(shù)獲取
default: function () {
return {
name: "xxxx",
age: -1,
};
},
},
obj2: {
func: Function,
},
},
data() {
return {};
},
methods: {},
};
</script>
注意：對象和數(shù)組的默認(rèn)值必須從一個工廠函數(shù)獲取。
通過required設(shè)置必須屬性
name: {
// 設(shè)置類型
type: String,
// 設(shè)置默認(rèn)值
default: "XXX",
// 通過required設(shè)置必須屬性
required: true,
},通過required設(shè)置name為必需屬性之后，如果沒有傳遞name字段，就會有錯誤提示。
多種類型中的一種
<template>
<div>數(shù)據(jù)驗證</div>
</template>
<script>
export default {
name: "PropsChildDemo",
components: {},
props: {
info: [String, Number, Boolean],
},
data() {
return {};
},
};
</script>info必須為String,Number,Boolean中的一種，否則就會有提示。
傳遞了一個對象：
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: {
nam: "張三",
age: 20,
},
};
},
};
</script>
傳遞一個字符串：
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: "張三",
};
},
};
</script>
對象數(shù)組驗證，并且數(shù)組元素是特定屬性的對象
驗證info是一個數(shù)組，并且數(shù)組元素是由name，age屬性組成的對象
<template>
<div>數(shù)據(jù)驗證</div>
</template>
<script>
export default {
name: "PropsChildDemo",
components: {},
props: {
info: {
// 設(shè)置必須
required: true,
type: Array,
// 驗證info是一個數(shù)組，并且數(shù)組元素是由name，age屬性組成的對象
validator(value) {
return value.every((item) => {
const { name, age } = item;
return Boolean(name && age);
});
},
},
},
data() {
return {};
},
};
</script>少傳一個屬性：
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: [
{
name: "zhangsan",
age: 20,
},
// 其中一個元素少一個屬性
{
name: "wangwu",
},
],
};
},
};
</script>
按要求傳遞：
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: [
{
name: "zhangsan",
age: 20,
},
{
name: "wangwu",
age: 21,
},
],
};
},
};
</script>
多傳遞一個參數(shù)：
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: [
// 多傳遞一個參數(shù)
{
name: "zhangsan",
age: 20,
num: 88,
},
],
};
},
};
</script>
所以少傳或者錯傳都會驗證失敗，多傳或者按要求傳遞能驗證通過。
自定義驗證函數(shù)
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: "zhaoliu",
};
},
};
</script><template>
<div>{{ info }}</div>
</template>
<script>
export default {
name: "PropsChildDemo",
components: {},
props: {
info: {
validator(value) {
return ["zhangsan", "lisi", "wangwu"].indexOf(value) !== -1;
},
},
},
data() {
return {};
},
};
</script>info必須為zhangsan,lisi,wangwu中的一個，否則就會有錯誤提示
傳遞zhangsan,lisi,wangwu中的一個，就不會有錯誤提示：
<template>
<div>
<PropsChildDemo :info="info"></PropsChildDemo>
</div>
</template>
<script>
import PropsChildDemo from "./PropsChildDemo.vue";
export default {
name: "PropsDemo",
components: { PropsChildDemo },
data() {
return {
info: "wangwu",
};
},
};
</script>
到此這篇關(guān)于React和Vue的props驗證的文章就介紹到這了,更多相關(guān)Vue props驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
React Js 微信禁止復(fù)制鏈接分享禁止隱藏右上角菜單功能
這篇文章主要介紹了React Js 微信禁止復(fù)制鏈接，分享，禁止隱藏右上角菜單的解決代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了React中的useState如何改變值不重新渲染的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本文介紹了ReactNative實現(xiàn)弧形拖動條,本組件使用到了react-native-svg和PanResponder,結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
在React日常開發(fā)中，我們常常被重復(fù)渲染或無意義渲染所折磨，窮盡腦汁，做各種優(yōu)化：memo、useMemo、useCallback、immutable等，本文主要講述immutable的簡約版Immer，感興趣的同學(xué)可以一起來學(xué)習(xí)2023-05-05
React中常見的TypeScript定義實戰(zhàn)教程
這篇文章主要介紹了React中常見的TypeScript定義實戰(zhàn),本文介紹了Fiber結(jié)構(gòu)，F(xiàn)iber的生成過程，調(diào)和過程，以及 render 和 commit 兩大階段，需要的朋友可以參考下2022-10-10
React實現(xiàn)Vue的watch監(jiān)聽屬性方式
這篇文章主要介紹了React實現(xiàn)Vue的watch監(jiān)聽屬性方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
react ant-design Select組件下拉框map不顯示的解決
這篇文章主要介紹了react ant-design Select組件下拉框map不顯示的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了react-router4按需加載(踩坑填坑)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01