使用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 的 ...
随机推荐
- css代码
#footr { background: #3e434a } #header #blogTitle { background: url("http://images.cnblogs.com/ ...
- Oracle 系统表
--如果一个表拥有DBA\\ALL\\USERS三个前缀 --DBA_前缀表示DBA拥有的或者可以访问的所有关系表 --ALL_前缀表示当前用户做拥有的或者可以访问的所有关系表 --USERS-前缀表 ...
- SVG path
在网页上画一图形,比如星星或波浪线,开始是想着图形软件画一个的,后来发现SVG这绘图程序的语言,感觉甚是可以,就发了些时间学了一下,在此做一简单分享和记录. 菜鸟上是这么介绍的(SVG 是使用 XML ...
- (SSO)单点登录原理和总结
一:什么是单点登录(single Sign-On) SSO 是一种统一认证和授权机制,指访问统一服务器不用应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后, 再访问其他应用中 ...
- win10下安装mysql-5.7.23-winx64
Step1 官方下载地址 https://dev.mysql.com/downloads/mysql/ 选择手动下载版本 解压到自己指定的路径 上图中的my.ini及data文件夹在压缩包里是没有的, ...
- JZOJ 5455. 【NOIP2017提高A组冲刺11.6】拆网线
455. [NOIP2017提高A组冲刺11.6]拆网线 (File IO): input:tree.in output:tree.out Time Limits: 1000 ms Memory L ...
- commons-logging日志实现解耦
一.需要解耦 日志是实际应用中的一个重要部分,日志系统也有许多开源的实现,如java.util.logging, logback, log4j系列等. 在使用日志系统时,如果与具体 ...
- spring boot 设置tomcat post参数限制
今天传图片,用的base64字符串,POST方法,前端传送的时候总是莫名其妙的崩溃,去网上搜了半天,以为是文件大小被限制了,但是我这个是字符串接收,不是文件接收,于是又继续搜,原来post本身没有参数 ...
- C语言中float如何存储?(转载)
float 内存如何存储的 类型 存储位数 总位数 偏移值(offset) 数符(S) 阶码(E) 尾数(M) 短实数(float) 1 8 23 32 127 长实数(double) 1 11 52 ...
- Flow Problem HDU - 3549
Flow Problem HDU - 3549 Network flow is a well-known difficult problem for ACMers. Given a graph, yo ...