使用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 的 ...
随机推荐
- 问题003:JDK文件夹下的bin有什么作用?javac.exe和java.exe双击后为什么一闪而过,没了?
bin (binary)二进制 ,JDK当中所有的可以执行的二进制应用程序都放在其中.其中都是*.exe文件,表示可以直接执行程序. javac.exe和java.exe双击后为什么一闪而过,没了?因 ...
- 十二、MySQL 查询数据
MySQL 查询数据 MySQL 数据库使用SQL SELECT语句来查询数据. 你可以通过 mysql> 命令提示窗口中在数据库中查询数据,或者通过PHP脚本来查询数据. 语法 以下为在MyS ...
- Linux-git安装
基本操作 安装yum install git 生成SSH KEY :先cd ~/.ssh,在这个目录下输入ssh-keygen,一直回车就可以了,这个时候就会出现id_rsd.pub公钥和id_rsa ...
- Python全栈学习:匿名函数使用规范
匿名函数,当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便. 在Python中,对匿名函数提供了有限支持.还是以map()函数为例,计算f(x)=x2时,除了定义一个f(x) ...
- c++ vector实例
#include <iostream> #include <string> #include <vector> #include <iostream> ...
- 排列算法汇总(下一个排列,全排列,第K个排列)
一.下一个排列 首先,STL提供了两个用来计算排列组合关系的算法,分别是next_permutation和prev_permutation. next_permutation(nums.begin() ...
- hashlib加密模块
python hashlib密码加密 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/dss_dssssd/article/details/828 ...
- TCP/IP网络编程之套接字类型与协议设置
套接字与协议 如果相隔很远的两人要进行通话,必须先决定对话方式.如果一方使用电话,另一方也必须使用电话,而不是书信.可以说,电话就是两人对话的协议.协议是对话中使用的通信规则,扩展到计算机领域可整理为 ...
- mysql插入、修改、删除
联合查询: union:合并.联合,将多次查询结果合并成一个结果 语法: 查询语句1: union[all] 查询语句2: union [all] ... 意义 1.将一条比较复杂的查询语句可拆分成多 ...
- LINQ体验(9)——LINQ to SQL语句之Insert/Update/Delete操作
我们继续讲解LINQ to SQL语句,这篇我们来讨论Insert/Update/Delete操作.这个在我们的程序中最为常用了.我们直接看例子. Insert/Update/Delete操作 插入( ...