react教程之props验证——props validation-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > react >

vue react javascript angular css html

react教程之props验证——props validation

作者：迹忆最近更新：2022/12/04 浏览次数：

props验证对于组件的正确使用是一种非常有用的方式。它可以避免随着你的应用的程序越来越复杂从而出现很多的bug和问题。并且，它还可以是你的程序变得更易读。

那如何对props进行验证呢，其实很简单，react为我们提供了proptypes以供验证使用。当我们向props传入的数据无效（也就是向props传入的数据类型和验证的数据类型不符）就会在控制台发出警告信息。

看下面的例子

var propsva = react.createclass({
    proptypes: {
        optionalarray: react.proptypes.array,
        optionalbool: react.proptypes.bool,
        optionalfunc: react.proptypes.func,
        optionalnumber: react.proptypes.number,
        optionalobject: react.proptypes.object,
        optionalstring: react.proptypes.string,
    },
    getdefaultprops:function(){
        return {
            optionalarray: ['onmpw.com','——迹忆博客'],
            optionalbool: true,
            optionalfunc: function (arg) {
               console.log(arg);
            },
            optionalnumber: 3,
            optionalobject: {
                object1: "objectvalue1",
                object2: "objectvalue2",
                object3: "objectvalue3",
            },
            optionalstring: "my onmpw",
        };
    },
    render:function(){
        return (

array:{this.props.optionalarray}

bool:{this.props.optionalbool}

func:click

number:{this.props.optionalnumber}

object:{this.props.optionalobject.object1}

object:{this.props.optionalobject.object2}

object:{this.props.optionalobject.object3}

string:{this.props.optionalstring}

        );
    }
});
reactdom.render(
    ,
    document.getelementbyid('content')
);

当然，上面这个例子是没有错误的。下面我们将上面的例子进行修改

getdefaultprops:function(){
    return {
        optionalarray: 'onmpw.com——迹忆博客',
        optionalbool: true,
        optionalfunc: function (arg) {
            console.log(arg);
        },
        optionalnumber: 3,
        optionalobject: {
            object1: "objectvalue1",
            object2: "objectvalue2",
            object3: "objectvalue3",
        },
        optionalstring: "my onmpw",
    };
},

然后，我们会在控制台中发现有如下的警告

warning: failed proptype: invalid prop `optionalarray` of type `string` supplied to `propsva`, expected `array`.

这是一种情况，验证props的数据类型。还有一种情况就是验证props是否有值。看下面的代码

proptypes: {
    optionalarray: react.proptypes.array.isrequired,
    optionalbool: react.proptypes.bool.isrequired,
    optionalfunc: react.proptypes.func,
    optionalnumber: react.proptypes.number,
    optionalobject: react.proptypes.object,
    optionalstring: react.proptypes.string,
},

在react.proptypes.array和react.proptypes.bool后面加上isrequired，表示optionalarray和optionalbool两项是必须有值的

getdefaultprops:function(){
    return {
        optionalfunc: function (arg) {
            console.log(arg);
        },
        optionalnumber: 3,
        optionalobject: {
            object1: "objectvalue1",
            object2: "objectvalue2",
            object3: "objectvalue3",
        },
        optionalstring: "my onmpw",
    };
},

在上面代码中我们将optionalarray和optionalbool去掉，然后再去浏览器中运行代码，会发现控制台报如下的错误

warning: failed proptype: required prop `optionalarray` was not specified in `propsva`.
warning: failed proptype: required prop `optionalbool` was not specified in `propsva`.

当然，上面只是简单的两种情况。对于props的验证，还有很多的东西，验证的形式也有很多，具体我们可以参考。

这里我们有一个知识点需要说明一下，就是getdefaultprops。这是默认给props赋值。看下面的代码

var componentdefaultprops = react.createclass({
    getdefaultprops: function() {
        return {
            value: 'default value'
        };
    },
    render:function(){
        return (

{this.props.value}

        )
    }
});
reactdom.render(
    ,
    document.getelementbyid('content')
);

getdefaultprops()可以保证，当父级组件没有传入props的时候，可以保证当前组件有默认的props的值。需要注意的是，getdefaultprops的返回结果是会被缓存起来的。因此，我们可以直接使用props，而没有必要再手动编写一些没有意义的重复的代码。

对于props的验证，就介绍到这里。希望本文对大家有所帮助。

上一篇：react教程之props反模式——anti-pattern

下一篇：react教程之子组件的props的类型

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

react教程之props验证——props validation-ag捕鱼王app官网