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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
php获取系统变量方法小结
2015/05/29 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
试述DBMS的主要功能
2016/11/13 面试题
人力资源主管岗位职责
2014/01/29 职场文书
《木笛》教学反思
2014/03/01 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
个人年终总结结尾
2015/03/06 职场文书
八年级作文之友情
2019/11/25 职场文书