React と Vue の Props の検証

プログラミング 2023-10-05 00:22:18 訪問数: null

目次

React での Props の検証

React の単一型バリデーター

属性のタイプとデフォルト値を設定する

 必要なプロパティを設定する

React の結合型バリデーター

PropTypes.oneOfType

 PropTypes.arrayOf

PropTypes.objectOf

PropTypes.shape を編集する

PropTypes.node

Vue での Props の検証

Vue データ検証: 変数名による: 特定の型メソッド

Vue データの検証: デフォルト値での検証

required を通じて必須の属性を設定します

多くの種類のうちの 1 つ

 オブジェクト配列の検証と配列要素は、特定のプロパティを持つオブジェクトです

カスタム検証関数

小道具検証を使用する理由

props 検証を使用することには 2 つの利点があります。

1. コンポーネント内の属性の種類と、どの属性が必要であるかを明確に知ることができます。

2. 送信データに誤りがあった場合、エラーを報告するため、問題箇所の特定が容易になります。

この記事では、React と vue でのデータ検証の方法と例を説明します。

React での Props の検証

propTypes は、props を検証するために React で使用されます。デフォルト値は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 (
            <div></div>
        )
    }
}
// 规定属性的类型-将propTypes设置成一个类构造函数属性
Child.propTypes={

}
// 设置默认值
Child.defaultProps = {

}

React の単一型バリデーター

PropType を使用すると、文字列 (文字列)、数値 (数値または数値に解析できる値)、ブール (ブール値)、オブジェクト (オブジェクト)、配列 (配列)、および関数 (関数) 型を検証できます。

属性のタイプとデフォルト値を設定する

使用例：

// 规定属性的类型-将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 (
            <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>学生信息：{`${objValue.name}-${objValue.age}`}</div>
                <div>得分：{numValue}</div>
                <div>备注:{strValue}</div>
                <button onClick={this.printData.bind(this)}>打印</button>
            </div>
        )
    }
}
// 规定属性的类型-将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 (
            <div>
                <Child
                    arrValue={arrValue}
                    boolValue={boolValue}
                    numValue={numValue}
                    objValue={objValue}
                    funcValue={this.print}
                    strValue={strValue}
                ></Child>
            </div >
        )
    }
}

 必要なプロパティを設定する

isRequired を使用して属性を必須に設定できます。親コンポーネントが渡されず、デフォルト値がない場合は、エラー メッセージが報告されます。

strValue の受け渡しに注釈を付ける

                <Child
                    arrValue={arrValue}
                    boolValue={boolValue}
                    numValue={numValue}
                    objValue={objValue}
                    funcValue={this.print}
                    // strValue={strValue}
                ></Child>

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 設定を手放すと、エラーが報告されないことがわかります。

                <Child
                    arrValue={arrValue}
                    boolValue={boolValue}
                    numValue={numValue}
                    objValue={objValue}
                    funcValue={this.print}
                    strValue={strValue}
                ></Child>

 

React の結合型バリデーター

組み合わせたバリデーターのタイプは次のとおりです。

oneOfType: 属性は、指定されたタイプのセットの 1 つである必要があります

arrayOf: 属性は、指定された要素で構成される配列である必要があります

objectOf: 属性は、指定されたタイプの属性値を持つオブジェクトである必要があります。つまり、オブジェクトは指定されたタイプの属性を持っている必要があります。

shape: 属性は特定の形式に準拠するオブジェクトである必要があり、同じ属性セットを持つ必要があります。

ノード: 属性はレンダリング可能な値である必要があります: 数値、文字列、要素、または配列

要素: 属性は React 要素である必要があります

instanceOf: 属性は指定されたクラスのインスタンスである必要があります

oneOf: プロパティが一連の列挙値の 1 つに制限されるようにします。

PropTypes.oneOfType

父親：

       const dataValue1 = '测试'//字符串
        const dataValue2 = 234//数字
        const dataValue3 = { name: '王五' }//非字符串和数字
        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>
        )
    }
}
// 规定属性的类型-将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 はどちらも指定された型の 1 つであり、通常どおり使用できることがわかりますが、dataValue3 は指定された型を渡しませんが、リマインダーが表示されます。

 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>
        )
    }
}
// 规定属性的类型-将propTypes设置成一个类构造函数属性
Child.propTypes = {
    dataValue1: PropTypes.arrayOf(PropTypes.number),
    dataValue2: PropTypes.arrayOf(PropTypes.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>
        )
    }
}
// 规定属性的类型-将propTypes设置成一个类构造函数属性
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"//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>
        )
    }
}
// 规定属性的类型-将propTypes设置成一个类构造函数属性
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
    }),
}

 

属性が欠落している場合や属性を追加している場合はエラー リマインダーが表示されないことがわかりますが、渡された属性タイプが所定のものと一致しない場合は、エラー リマインダーが表示されます。

PropTypes.node

親コンポーネント:

    render() {
        const dataValue1 = 123//数字
        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>
        )
    }
}
// 规定属性的类型-将propTypes设置成一个类构造函数属性
Child.propTypes = {
    dataValue1: PropTypes.node,
    dataValue2: PropTypes.node,
    dataValue3: PropTypes.node,
    dataValue4: PropTypes.node,
}

所定のプロパティが PropTypes.node 型の場合、数値、文字列、配列を渡すことができますが、オブジェクト型を渡すとエラー メッセージが報告されることがわかります。PropTypes.node タイプは数値、文字列、配列に限定されず、その他のレンダリング可能な要素も使用できることに注意してください。

Vue での Props の検証

vue で確認できるタイプは、文字列、数値、ブール、配列、オブジェクト、日付、関数、シンボル、およびカスタム タイプです。

Vue データ検証: 変数名による: 特定の型メソッド

親コンポーネント:

<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 データの検証: デフォルト値での検証

Vue でデフォルト値を設定するには、default 属性を使用しますが、このとき、データ型を設定するときに 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: {
      // 设置类型
      type: String,
      // 设置默认值
      default: "XXX",
    },
    age: {
      type: Number,
      default: 0,
    },
    obj: {
      type: Object,
      //  注意：对象和数组的默认值必须从一个工厂函数获取
      default: function () {
        return {
          name: "xxxx",
          age: -1,
        };
      },
    },
    obj2: {
      func: Function,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

注: オブジェクトと配列のデフォルト値はファクトリ関数から取得する必要があります。

required を通じて必須の属性を設定します

    name: {
      // 设置类型
      type: String,
      // 设置默认值
      default: "XXX",
      // 通过required设置必须属性
      required: true,
    },

 required を使用して name を必須属性として設定した後、name フィールドが渡されなかった場合、エラー メッセージが表示されます。

 

多くの種類のうちの 1 つ

<template>
  <div>数据验证</div>
</template>
<script>
export default {
  name: "PropsChildDemo",
  components: {},
  props: {
    info: [String, Number, Boolean],
  },
  data() {
    return {};
  },
};
</script>

info は文字列、数値、ブール値のいずれかでなければなりません。それ以外の場合はプロンプトが表示されます。

 オブジェクトが渡されます。

<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>

 

 オブジェクト配列の検証と配列要素は、特定のプロパティを持つオブジェクトです

info が配列であり、配列要素が name 属性と age 属性で構成されるオブジェクトであることを確認します。

<template>
  <div>数据验证</div>
</template>
<script>
export default {
  name: "PropsChildDemo",
  components: {},
  props: {
    info: {
      // 设置必须
      required: true,
      type: Array,
      // 验证info是一个数组，并且数组元素是由name，age属性组成的对象
      validator(value) {
        return value.every((item) => {
          const { name, age } = item;
          return Boolean(name && age);
        });
      },
    },
  },
  data() {
    return {};
  },
};
</script>

渡す属性を 1 つ減らします。

<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>

 

もう 1 つのパラメータを渡します。

<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,
          num: 88,
        },
      ],
    };
  },
};
</script>

 

したがって、合格した値が少ないか不正確な場合は検証は失敗し、合格した値が多かったり必要に応じて合格した場合は検証に合格します。 

 

カスタム検証関数

<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>

 

 

おすすめ

転載: blog.csdn.net/Celester_best/article/details/126025055
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com