React教程之Props验证的具体用法(PropsValidation)

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的验证,还有很多的东西,验证的形式也有很多,具体我们可以参考React官方文档。

这里我们有一个知识点需要说明一下,就是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验证的具体用法(PropsValidation)
转载来源:http://scyanting.com/article/pijihi.html