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


Posted in Javascript onSeptember 04, 2017

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,而没有必要再手动编写一些没有意义的重复的代码。

对于Props的验证,就介绍到这里。希望本文对大家有所帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
图解JavaScript中的this关键字
May 28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
深入了解JavaScript 防抖和节流
Sep 12 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
vue中component组件的props使用详解
Sep 04 #Javascript
React-Native中props具体使用详解
Sep 04 #Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 #Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php中异常处理方法小结
2015/01/09 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
python实现移动木板小游戏
2020/10/09 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
外贸业务员工作职责
2014/01/06 职场文书
房产委托公证书
2014/04/08 职场文书
十佳少年事迹材料
2014/12/25 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL