React中怎么实现Props验证

本文小编为大家详细介绍“React中怎么实现Props验证”，内容详细，步骤清晰，细节处理妥当，希望这篇“React中怎么实现Props验证”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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 (
            <div>
                <h3>Array:{this.props.optionalArray}</h3>
                <h3>Bool:{this.props.optionalBool}</h3>
                <h3 onClick={this.props.optionalFunc}>Func:click</h3>
                <h3>Number:{this.props.optionalNumber}</h3>
                <h3>Object:{this.props.optionalObject.object1}</h3>
                <h3>Object:{this.props.optionalObject.object2}</h3>
                <h3>Object:{this.props.optionalObject.object3}</h3>
                <h3>String:{this.props.optionalString}</h3>
            </div>
        );
    }
});
ReactDOM.render(
    <Propsva />,
    document.getElementById('content')
);

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

getDefaultProps:function(){
    return {
        optionalArray: 'onmpw.com&mdash;&mdash;迹忆博客',
        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的验证，还有很多的东西，验证的形式也有很多，具体我们可以参考React官方文档。

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

var ComponentDefaultProps = React.createClass({
    getDefaultProps: function() {
        return {
            value: 'Default Value'
        };
    },
    render:function(){
        return (
            <div>{this.props.value}</div>
        )
    }
});
ReactDOM.render(
    <ComponentDefaultProps />,
    document.getElementById('content')
);

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

读到这里，这篇“React中怎么实现Props验证”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。