propTypes 使用來規範元件Props的型別與必需狀態

var Test = React.createClass({
propTypes: {
// required requiredFunc: React.PropTypes.func.isRequired,
requiredAny: React.PropTypes.any.isRequired, // primitives, optional by default bool: React.PropTypes.bool,
func: React.PropTypes.func,
number: React.PropTypes.number,
string: React.PropTypes.string,
},
render:function(){
return <div/>
}
}); var component = React.render(
<Test requiredFunc="bar" bool="true" requiredAny="a"/>,
document.body
);

若沒有按照規範,會顯示警告

線上測試:http://jsbin.com/suweke/3/edit

React.PropTypes 的種類

React.PropTypes.array           // 陣列

React.PropTypes.bool.isRequired // Boolean 且必要。

React.PropTypes.func            // 函式

React.PropTypes.number          // 數字

React.PropTypes.object          // 物件

React.PropTypes.string          // 字串

React.PropTypes.node            // 任何類型的: numbers, strings, elements 或者任何這種類型的陣列

React.PropTypes.element         // React 元素

React.PropTypes.instanceOf(XXX) // 某種XXX類別的實體

React.PropTypes.oneOf(['foo', 'bar']) // 其中一個字串

React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 其中一種格式類型

React.PropTypes.arrayOf(React.PropTypes.string)  // 某種類型的陣列(字串類型)

React.PropTypes.objectOf(React.PropTypes.string) // 具有某種屬性類型的物件(字串類型)

React.PropTypes.shape({                          // 是否符合指定格式的物件

  color: React.PropTypes.string,
fontSize: React.PropTypes.number
});
React.PropTypes.any.isRequired // 可以是任何格式,且必要。 // 自定義格式(當不符合的時候,會顯示Error) // 不要用`console.warn` 或者 throw, 因为它在`oneOfType` 的情况下無效。 customPropType: function(props, propName, componentName) {
if (!/^[0-9]/.test(props[propName])) {
return new Error('Validation failed!');
}
}

getDefaultProps

當父元件沒有提供props的屬性時,可以採用getDefaultProps,預設props屬性的方式,讓元件使用預設的設定值,確保有props帶入。

var ComponentWithDefaultProps = React.createClass({
getDefaultProps : function () {
return {
value : 'default value'
};
},
/* ... */
});

Reactjs 的 PropTypes 使用方法的更多相关文章

  1. 正式学习React(五) Reactjs 的 PropTypes 使用方法

    propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...

  2. Reactjs组件中的方法为什么绑定this?

    前言:Reactjs中的定义的方法其实是基于实例的原型方法:es6默认严格模式   问题:在Reactjs组件中写入以下代码,那么执行结果会是什么呢? ··· 结果是这样的: 对的,你没看错,不是do ...

  3. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

  4. React组件属性/方法/库属性

    1. propTypes 用于进行props的类型检查:来自于prop-types库. // V15.5之后 import PropTypes from 'prop-types'; 该方法适用于函数组 ...

  5. react9 生命周期

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  6. React之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...

  7. ReactNative——生命周期

    1.创建阶段 getDefaultProps:处理props的默认值 在react.createClass调用 //在创建类的时候被调用 this.props该组件的默认属性 2.实例化阶段 Reac ...

  8. 010_React-组件的生命周期详解

    ReactJS 的核心思想是组件化,即按功能封装成一个一个的组件,各个组件维护自己的状态和 UI,当状态发生变化时,会自定重新渲染整个组件,多个组件一起协作共同构成了 ReactJS 应用. 为了能够 ...

  9. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

随机推荐

  1. mysql 在线添加字段

    使用工具pt-online-schema-change #! /bin/bash stime=`date +%s` echo "增加字段开始测试时间为:`date +%H:%M:%S`&qu ...

  2. 如何用纯 CSS 创作一个行驶中的火车 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 ...

  3. windows server 服务器 环境配置

    自动备份 xcopy d:\web\zhiku\*.* d:\bak\web\zhiku\%date:~,4%%date:~5,2%%date:~8,2%\ /S /I

  4. 大家好,我是一个JAVA初学者,想在这里记下自己学习过程中的点点滴滴,请多多关照

    大家好,我是一个JAVA初学者,想在这里记下自己学习JAVA的点点滴滴,请多多关照. 以前一直在QQ空间里记录的,但感觉有些麻烦,而且有些东西自己理解的并不完善甚至都不正确,现在开始在这里重新记录,从 ...

  5. 搭建基于金山快盘的Git服务器

    最近迷上了Git,这货堪称神器,用了它就再也不想用其他VCS了,就像上了高速就不想再走国道一样. 一般人使用Git+Github来搭建进行本地远程交互,不过Github弄个私人仓库是要刀乐思的,如果你 ...

  6. matlab图形handle

  7. [转] NGINX宏观手记

    前言 任何一个工具都有它的灵魂所在,作为一个PHP程序员,我们可能仅仅使用了它的一小部分,这篇文章让你更加了解Nginx,本章大多都是总结.翻译.整理 ,希望你可以知道nginx不仅仅是PHP的附属品 ...

  8. Scala学习-02-方法

    算数和操作符重载 所有的操作符都是方法. a + b 是一种缩写形式  :  a .+ b “+”是方法名(操作符重载) ++和—— Scala中并没有“++”和“——”.需要使用“+=”和“-=” ...

  9. 深入了解ASO

    ASO对于一些人来说可能很陌生,很多人都听说过SEO,没有听说过ASO(我也是最近才知道这个领域),因为这是一个数字营销的一个新领域.ASO(App Store Optimization)是为了让自己 ...

  10. 04-python进阶-map&reduce

    Map --映射 Reduce -- 归纳 将大数据标准化的处理 Map 拆封任务,Reduce将结果合并 这样是不是能够将很多计算机组成一台超级计算机呢? 一些问题:如果任务本身就很复杂,那么拆解任 ...