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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
清空上传控件input file的值
Jul 03 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
jQuery的事件预绑定
Dec 05 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php过滤敏感词的示例
2014/03/31 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python画图高斯分布的示例
2019/07/10 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
经典c++面试题六
2012/01/18 面试题
超市后勤自我鉴定
2014/01/17 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
教师绩效工资方案
2014/02/01 职场文书
求职意向书
2014/07/29 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS