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. C#继承机制 C#中的继承符合下列规则

    1.继承是可传递的.如果C从B中派生,B又从A中派生,那么C不仅继承了B中声明的成员,同样也继承了A中的成员.Object 类作为所有类的基类. 2.派生类应当是对基类的扩展.派生类可以添加新的成员, ...

  2. python 读取mat文件

    import osimport scipy.io as sio import numpy as np #matlab文件名 matfn='/home/user/devkit/data/meta_det ...

  3. 理解Express 中间件

    Express 中间件 Express程序基本上是一系列中间件函数的调用.中间件就是一个函数, 接受 req.res.next几个参数. 中间件函数可以执行任何代码, 对请求和响应对象进行修改, 结束 ...

  4. C++ 容器与继承

    如果容器类型定义为基类类型,那么虽然可以把派生类装进容器中,但是不能通过容器访问派生类自己的public成员,派生类将会倍切掉,只保留派生类的基类部分: 如果把容器定义为派生类类型,那么不能把基类类型 ...

  5. 牛客小白月赛5 F 圆(circle) 【欧拉定理】

    题目连接: https://www.nowcoder.com/acm/contest/135/F 签到题来了,送你们一个Python秒的题. Apojacsleam来到了OI大陆,经过了连年征战,成为 ...

  6. c++异常处理--创建自己的异常处理类

    复习了一下c++中的异常处理! 继承exception类 class myException : public std::exception { public: explicit myExceptio ...

  7. 洛谷P1049装箱问题

    一句话刚刚的题会了,这题能不会么. #include<bits/stdc++.h> using namespace std; int main(){ int n,m; cin>> ...

  8. GNU汇编程序框架

    汇编的作用:1.对芯片进行初始化 2. 和C混合编程提升C的运行效率 .section .data < 初始化的数据> .section .bss <未初始化的数据> .sec ...

  9. 小象学院Python数据分析第二期【升级版】

    点击了解更多Python课程>>> 小象学院Python数据分析第二期[升级版] 主讲老师: 梁斌 资深算法工程师 查尔斯特大学(Charles Sturt University)计 ...

  10. Zimber 8.8.12卸载后重新安装报错解决办法

    1.1  zimber故障处理步骤 1.1.1  现象描述 Running Post Installation Configuration: /opt/zimbra/bin/zmlocalconfig ...