Javascript.Reactjs-5-prop-validation-and-proptypes
Props & PropTypes
1. Props
"Props are the mechanism React uses to let components communicate with each other.
A parent component can pass it’s child(ren) named prop values, which the child can then
use in its internal logic." Ref[2]
"React components have an internal property ‘props’. This property contains all the props
a component gets from its parent. " Ref[2]
2. PropTypes
2.1 Introduction
"This is where Reacts propTypes come in. It’s essentially a dictionary where you define what
props your component needs and what type(s) they should be." Ref[2]
propTypes: {
//Id can be a number, or a string, but it needs to be defined!
id: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string
]).isRequired, //Messages should be an object with a title and text property of type string
message: React.PropTypes.shape({
title: React.PropTypes.string,
text: React.PropTypes.string
}).isRequired, //The comments property needs to be an array of objects.
comments: React.PropTypes.arrayOf(React.PropTypes.object), //The date needs to be an instance of type Date.
date: React.PropTypes.instanceOf(Date)
}
2.2 React.PropTypes.shape()
react@15.1.0
A): React.js
var ReactPropTypes = require('./ReactPropTypes'); // ...... var React = {
// ......
PropTypes: ReactPropTypes,
// .......
}; module.exports = React;
B): ReactPropTypes.js
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'), any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker
}; // ......
module.exports = ReactPropTypes;
C): Comment for createShapeTypeChecker function
function createShapeTypeChecker(shapeTypes)
function createChainableTypeChecker(validate)
2.3 Use Case of React.PropTypes.shape()
https://github.com/reactjs/react-redux/blob/master/src/utils/storeShape.js
https://github.com/reactjs/react-redux/blob/master/src/components/Provider.js
Reference
1. Prop Validation
https://facebook.github.io/react/docs/reusable-components.html
2. Why React PropTypes are important
http://wecodetheweb.com/2015/06/02/why-react-proptypes-are-important/
Javascript.Reactjs-5-prop-validation-and-proptypes的更多相关文章
- [Javascript] Check both prop exists and value is valid
Sometime you need to check one prop exists on the object and value should not be ´null´ or ´undefine ...
- javascript (0, obj.prop)()的用法
我第一次看到这种奇怪的用法是在babel的源码中, 其实它的原理就是使得在prop这个方法里无法获取this, 从而无法对类中的其他变量或方法做操作. obj.prop() 这是一个方法调用, pro ...
- JavaScript 和 React,React用了大量语法糖,让JS编写更方便。
https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...
- JavaScript周报#183
This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 183Ma ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- javascript——后台传值map类型转换成json对象
前端需要对后端传过来的值进行解析之后再展示,而后端传过来的值可能是各种类型的,一般情况下要么和后端沟通下让他直接传给我们需要的类型,这个,我一般直接自己转,这次后端传回来一个map类型的对象,我转来转 ...
- asp.net mvc 各版本区别
MVC 6 ASP.NET MVC and Web API has been merged in to one. Dependency injection is inbuilt and part of ...
- juery学习总结(一)——juery选择器
juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...
- jQuery属性/CSS使用例子
jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...
随机推荐
- 对于有了ACM以后的生活
我是大二学生,才接触ACM不到5个星期,因为受到我们班dalao的"引诱",去参加了一次我们学校举行的萌新杯,于是就入坑了,而我又在校外学习一些关于安全的知识,前几天一直纠结要不要 ...
- Linux cache释放
cache释放: To free pagecache: > /proc/sys/vm/drop_caches To free dentries and inodes: > /proc/sy ...
- Opencv配置问题_Error LNK2019
终于配好opencv(Win7 64位+VS2013+opencv2.4.9),兴奋的写了第一个程序(当然是显示lena的玉照了): #include <opencv2\opencv.hpp&g ...
- JS最基础的获取元素的值实现加减乘除运算
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Neural Network学习(一) 最早的感知机:Perceptron of Rosenblatt
1. Frank Rosenblatt 首先介绍的是神经网络的开山祖师,先放张图拜拜 Frank Rosenblatt出生在纽约,父亲是医生,其1956年在Cornell大学拿到博士学位后,留校任教, ...
- PHP+Mysql+jQuery实现文件下载次数统计
数据表 CREATE TABLE IF NOT EXISTS `downloads` ( `id` int(6) unsigned NOT NULL AUTO_INCREMENT, `file ...
- prolog --寻找neni (2)
混合查询 我们可以把简单的查询连接起来,组成复杂的查询. ?- location(X,kitchen),edible(X). 简单查询只有一个目标,而混合查询可以把这些目标连接起来.从而进行较为复杂的 ...
- css中伪元素before或after中content的特殊用法attr
html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...
- 防御病毒邮件得看U-Mail邮件网关
其实在邮件通讯中,那些病毒.垃圾邮件.钓鱼软件也相当危险,在海量邮件中,你没法确定什么时间.哪一封会发起进攻,攻击的目标都有谁?但是一旦得逞,造成的损失又特别大. 最近美国同行又发现了一个新骗局:美国 ...
- Redis(三)节省内部空间优化
总体原则:key的名称不易过长,剩下的所有 能用纯数字表示的尽量用 Redis的每一个键值都是用一个redisObject结构体表示的结构体中有: 键值的类型(string/list/hash/ ...