使用PropTypes进行类型检测
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进行类型检测的更多相关文章
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- prop-types:该第三方库对组件的props中的变量进行类型检测
利用prop-types第三方库对组件的props中的变量进行类型检测
- 十分钟学习 react配套的类型检测库——prop-types的运用
js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...
- js类型检测总结
类型检测: 类和对象: Call,Apply,Bind
- javascript类型与类型检测
1.javascript类型: 注:包装对象:如"hello".length实际为js为我们隐式创建了一个String临时对象,去调用该对象的length属性,调用过后再将该临时对 ...
- 谈谈JavaScript类型检测
javascript内置的类型检测机制并非完全可靠.比如typeof操作符,并不能准确的判断数据是哪个类型,比如:数组和对象就不能通过typeof来区分. typeof [] ==="o ...
- JS数组类型检测
在强类型语言,数组类型检测是非常容易的事情(typeof就可以解决),而在弱语言JS数据类型就很容易混淆了. JS中常见的数据类型有:number.string.boolean.undefined.f ...
- 小结 javascript中的类型检测
先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...
- STUN: NAT 类型检测方法
STUN(Simple Transversal of UDP through NATs)[21]是RFC3489 规定的一种NAT 穿透方式,它采用辅助的方法探测NAT 的IP 和端口. STUN 的 ...
随机推荐
- 学习sqlserver的函数方法
http://www.w3school.com.cn/sql/func_datediff.asp SQL Server DATEDIFF() 函数 SELECT DATEDIFF(day,'2008- ...
- el-upload控件一次接口请求上传多个文件
el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码 html <el-upload :action="act ...
- 1269: [AHOI2006]文本编辑器editor
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 5269 Solved: 2037[Submit][Status][Discuss] Descript ...
- PAT 乙级 1015
题目 题目地址:PAT 乙级 1015 题解 常规题,难点在于理清楚排序规则,通过比较简洁的方式进行编码: 在这里我选择使用vector进行存储,并使用sort方法排序,因为本题不是简单按照大小排序, ...
- RSA等非对称加密为什么要用公钥加密,而用私钥解密?
1.RSA是不对称加密算法,它的公钥可能会被多人持有(公钥公钥,公开的密钥),而私钥只有一人拥有,例如支付宝开放平台,私钥只有支付宝公司持有,而公钥则是所有接入它API的公司都能得到.对于公钥加密的信 ...
- 二十九、MySQL 序列使用
MySQL 序列使用 MySQL 序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍 ...
- Ubuntu设置代理上网
代理服务器(Proxy Server)是个人网络和Internet服务商之间的中间代理机构,它负责转发合法的网络信息,对转发进行控制和登记.代理服务器作为连接Internet(广域网)与Intrane ...
- keil swd设置下载stm32f103c8t6.
1.debug选项,选择jlink,2.utilities选择jlink3.加载flash算法.4.选择swd模式,其他基本上默认,这样就可以下载了对rom和ram设置需要说明一下:1,IROM1,前 ...
- Nearest Common Ancestors POJ - 1330 (LCA)
Nearest Common Ancestors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 34657 Accept ...
- mysql-show processlist之writing to net
mysql提示Writing to net解决 最近发现某一个数据库cpu占用比较过.超过200%了. 首先查看数据库慢日志,设定慢日志5秒,基本上没有产生日,没有超过5秒的语句. show proc ...