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. nginx入门学习步骤(linux)

    一.nginx下载(nginx-1.9.9) http://nginx.org/download/ 二.解压到指定文件夹 tar -zxvf 解压缩文件 三.设置配置信息 在nignx解压文件夹内执行 ...

  2. 【C++学习笔记】强大的算法——spfa

    spfa的定义 PFA算法的全称是:Shortest Path Faster Algorithm,用于求单源最短路,由西南交通大学段凡丁于1994年发表.当给定的图存在负边时,Dijkstra算法就无 ...

  3. C/C++程序基础 (八)数据结构

    非递归先序遍历 // 输出, 遍历左子树,遍历右子树 void firstOrder(Node* root) { stack<Node*> leftNodes; Node* curr = ...

  4. TCP/IP与OSI参考模型原理

    网络是很重要同时也是很难理解的知识,这篇文章将会用自己容易理解的方式来记录有关网络的tcp与osi模型内容,不求专业深刻,但求通俗易懂也好. OSI参考模型 OSI定义了网络互连的七层框架(物理层.数 ...

  5. LAMP PHP 详解

    目录 LAMP PHP 详解 LAMP 请求流程与原理 PHP 简介 PHP Zend Engine Opcode php 配置详解 php 加速器 部署LAMP 使用 php 连接 mysql 最基 ...

  6. PHP去掉字符串中的数字

    这个比较简单,但是也有些需要注意的地方,先贴代码 $class=preg_replace("\\d+",'', $res); 需要使用preg_replace函数,但是只是这么写的 ...

  7. MTCNN自己的学习理解

    MTCNN 流程 经过三个网络 P-Net,R-Net,O-Net 对于P-Net: P-Net是一个全卷积层,不涉及到全连接层,所以我们的输入图像的尺寸可以是不固定的. 对于P-Net来说,我们的输 ...

  8. Python入门基础--变量与基本数据类型

    变量 什么是变量 变量就是变化的量,变就是变化,量用于衡量描述对象的状态 为什么要有变量 程序执行的本质就是一系列状态的变化,变是程序执行的直接体现,所以我们需要有一种机制能够反映或者说是保存下来程序 ...

  9. 必须使用member initialization list来初始化的情况

    // member initialization #include <iostream> using namespace std; class Circle { double radius ...

  10. Word 2013发布博客测试

    Hello world ! I am from word2013! 测试修改 这里添加一行文字.   参考 1在 Word 中建立博客的相关帮助 2使用Word2013发布随笔到博客园 PS: 参考2 ...