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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
JavaScript之自定义类型
May 04 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
js中document.write的那点事
Dec 12 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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 移除数组重复元素的一点说明
2008/11/27 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
python 类详解及简单实例
2017/03/24 Python
详解python中的文件与目录操作
2017/07/11 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
单利模式及python实现方式详解
2018/03/20 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Python各种扩展名区别点整理
2020/02/27 Python
python实现FTP循环上传文件
2020/03/20 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
学生爱国演讲稿
2014/01/14 职场文书
社团活动总结范文
2014/04/26 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
2019新员工心得体会
2019/06/25 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript