React教程之Props验证的具体用法（Props Validation）

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

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

看下面的例子

博客'],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') );

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

博客',optionalFunc: function (arg) { console.log(arg); },optionalObject: { object1: "objectvalue1",}; },

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

Warning: Failed propType: Invalid prop `optionalArray` of type `string` supplied to `Propsva`,expected `array`.

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

required,optionalBool: React.PropTypes.bool.isrequired,

在React.PropTypes.array和React.PropTypes.bool后面加上isrequired，表示optionalArray和optionalBool两项是必须有值的

在上面代码中我们将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赋值。看下面的代码

{this.props.value}

) } }); ReactDOM.render( ,document.getElementById('content') );

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

对于Props的验证，就介绍到这里。希望本文对大家有所帮助。也希望大家多多支持编程之家。