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)

ReactPropTypes-reading.js

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的更多相关文章

  1. [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 ...

  2. javascript (0, obj.prop)()的用法

    我第一次看到这种奇怪的用法是在babel的源码中, 其实它的原理就是使得在prop这个方法里无法获取this, 从而无法对类中的其他变量或方法做操作. obj.prop() 这是一个方法调用, pro ...

  3. JavaScript 和 React,React用了大量语法糖,让JS编写更方便。

    https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...

  4. JavaScript周报#183

    This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 183Ma ...

  5. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  6. javascript——后台传值map类型转换成json对象

    前端需要对后端传过来的值进行解析之后再展示,而后端传过来的值可能是各种类型的,一般情况下要么和后端沟通下让他直接传给我们需要的类型,这个,我一般直接自己转,这次后端传回来一个map类型的对象,我转来转 ...

  7. asp.net mvc 各版本区别

    MVC 6 ASP.NET MVC and Web API has been merged in to one. Dependency injection is inbuilt and part of ...

  8. juery学习总结(一)——juery选择器

    juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...

  9. jQuery属性/CSS使用例子

    jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...

随机推荐

  1. 对于有了ACM以后的生活

    我是大二学生,才接触ACM不到5个星期,因为受到我们班dalao的"引诱",去参加了一次我们学校举行的萌新杯,于是就入坑了,而我又在校外学习一些关于安全的知识,前几天一直纠结要不要 ...

  2. Linux cache释放

    cache释放: To free pagecache: > /proc/sys/vm/drop_caches To free dentries and inodes: > /proc/sy ...

  3. Opencv配置问题_Error LNK2019

    终于配好opencv(Win7 64位+VS2013+opencv2.4.9),兴奋的写了第一个程序(当然是显示lena的玉照了): #include <opencv2\opencv.hpp&g ...

  4. JS最基础的获取元素的值实现加减乘除运算

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Neural Network学习(一) 最早的感知机:Perceptron of Rosenblatt

    1. Frank Rosenblatt 首先介绍的是神经网络的开山祖师,先放张图拜拜 Frank Rosenblatt出生在纽约,父亲是医生,其1956年在Cornell大学拿到博士学位后,留校任教, ...

  6. PHP+Mysql+jQuery实现文件下载次数统计

    数据表 CREATE TABLE IF NOT EXISTS `downloads` (   `id` int(6) unsigned NOT NULL AUTO_INCREMENT,   `file ...

  7. prolog --寻找neni (2)

    混合查询 我们可以把简单的查询连接起来,组成复杂的查询. ?- location(X,kitchen),edible(X). 简单查询只有一个目标,而混合查询可以把这些目标连接起来.从而进行较为复杂的 ...

  8. css中伪元素before或after中content的特殊用法attr

    html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...

  9. 防御病毒邮件得看U-Mail邮件网关

    其实在邮件通讯中,那些病毒.垃圾邮件.钓鱼软件也相当危险,在海量邮件中,你没法确定什么时间.哪一封会发起进攻,攻击的目标都有谁?但是一旦得逞,造成的损失又特别大. 最近美国同行又发现了一个新骗局:美国 ...

  10. Redis(三)节省内部空间优化

    总体原则:key的名称不易过长,剩下的所有 能用纯数字表示的尽量用 Redis的每一个键值都是用一个redisObject结构体表示的结构体中有:    键值的类型(string/list/hash/ ...