作者:迹忆 字体:[增加 减小] 类型:转载 时间:2017-09-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 ( < 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——迹忆博客',
- 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,而没有必要再手动编写一些没有意义的重复的代码。
来源: http://www.jb51.net/article/122796.htm