PropTypes 是react提供的用于检验数据类型的typechecking,避免应用越来越大的时候出现意料之外的bug

class Greeting extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
)
};
}
Greeting.propTypes = {
name: React.PropTypes.string.isRequired
};

使用方法如上,作用是检测该组件的使用者是否给name传入的值是字符串,并且该属性必填。

另外,可以通过枚举的方式来给属性指定几个特定的值

optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

指定optionalEnum属性只能是 News、Photos这两个值

同时可以给属性指定多个类型

optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),

也可以指定为由某种特定类型组成的对象

  // 某种类型的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 具有某种类型的属性值的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

设置默认的属性值

// 如果name没有传值,则会将name设置为默认的zhangyatao
Greeting.defaultProps = {
name: 'zhangyatao'
}

当没有传入name这个属性的时候,name默认为zhangyatao

使用PropTypes进行类型检测的更多相关文章

  1. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  2. prop-types:该第三方库对组件的props中的变量进行类型检测

    利用prop-types第三方库对组件的props中的变量进行类型检测

  3. 十分钟学习 react配套的类型检测库——prop-types的运用

    js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...

  4. js类型检测总结

    类型检测: 类和对象: Call,Apply,Bind

  5. javascript类型与类型检测

    1.javascript类型: 注:包装对象:如"hello".length实际为js为我们隐式创建了一个String临时对象,去调用该对象的length属性,调用过后再将该临时对 ...

  6. 谈谈JavaScript类型检测

      javascript内置的类型检测机制并非完全可靠.比如typeof操作符,并不能准确的判断数据是哪个类型,比如:数组和对象就不能通过typeof来区分. typeof [] ==="o ...

  7. JS数组类型检测

    在强类型语言,数组类型检测是非常容易的事情(typeof就可以解决),而在弱语言JS数据类型就很容易混淆了. JS中常见的数据类型有:number.string.boolean.undefined.f ...

  8. 小结 javascript中的类型检测

    先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...

  9. STUN: NAT 类型检测方法

    STUN(Simple Transversal of UDP through NATs)[21]是RFC3489 规定的一种NAT 穿透方式,它采用辅助的方法探测NAT 的IP 和端口. STUN 的 ...

随机推荐

  1. React后台管理系统-商品列表搜索框listSearch组件

    1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap">               <div classN ...

  2. tomcat的启动和部署

    方法/步骤 1 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. ...

  3. 关于微信小程序 textarea组件在fixed定位的模块中随页面移动问题

    具体的情况: 在模拟器中没问题,可是在真机下就出现以下问题,  <textarea  />在一个view盒子中,view盒子是固定定位,页面滑动时候,固定定位的盒子会定在屏幕的相对位置,但 ...

  4. Smallest Common Multiple-freecodecamp算法题目

    Smallest Common Multiple 1.要求 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. 2.思路 设定一个twoMultiple(a,b)函数,求出输入两个参数的最小公 ...

  5. 1452: [JSOI2009]Count

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 3135  Solved: 1828[Submit][Status][Discuss] Descripti ...

  6. jenkins重置build序号

    来源:https://www.jianshu.com/p/e342b52d45e1 执行命令:item = Jenkins.instance.getItemByFullName("your- ...

  7. java抓取12306火车余票信息

    最近在弄一个微信的公众帐号,涉及到火车票查询,之前用的网上找到的一个接口,但只能查到火车时刻表,12306又没有提供专门的查票的接口.今天突然想起自己直接去12306上查询,抓取查询返回的数据包,这样 ...

  8. mysql中的FROM_UNIXTIME()函数和UNIX_TIMESTAMP()函数

    unix_timestamp 是时间戳,可以用数据库里的存储时间数据的字段 from_unixtime 是将时间戳格式化为你想要时间

  9. Python中字符串String的基本内置函数与过滤字符模块函数的基本用法

    Python中字符串String的基本内置函数与用法 首先我们要明白在python中当字符编码为:UTF-8时,中文在字符串中的占位为3个字节,其余字符为一个字节 下面就直接介绍几种python中字符 ...

  10. Flask初学者:session操作

    cookie:是一种保存数据的格式,也可以看成是保存数据的一个“盒子”,服务器返回cookie给浏览器(由服务器产生),由浏览器保存在本地,下次再访问此服务器时浏览器就会自动将此cookie一起发送给 ...