Reactjs 的 PropTypes 使用方法
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 使用方法的更多相关文章
- 正式学习React(五) Reactjs 的 PropTypes 使用方法
propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...
- Reactjs组件中的方法为什么绑定this?
前言:Reactjs中的定义的方法其实是基于实例的原型方法:es6默认严格模式 问题:在Reactjs组件中写入以下代码,那么执行结果会是什么呢? ··· 结果是这样的: 对的,你没看错,不是do ...
- react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本: ...
- React组件属性/方法/库属性
1. propTypes 用于进行props的类型检查:来自于prop-types库. // V15.5之后 import PropTypes from 'prop-types'; 该方法适用于函数组 ...
- react9 生命周期
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- React之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...
- ReactNative——生命周期
1.创建阶段 getDefaultProps:处理props的默认值 在react.createClass调用 //在创建类的时候被调用 this.props该组件的默认属性 2.实例化阶段 Reac ...
- 010_React-组件的生命周期详解
ReactJS 的核心思想是组件化,即按功能封装成一个一个的组件,各个组件维护自己的状态和 UI,当状态发生变化时,会自定重新渲染整个组件,多个组件一起协作共同构成了 ReactJS 应用. 为了能够 ...
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
随机推荐
- char与varchar的区别与联系
char是字节类型,varcahr是字符类型 1.char(20) 存放的是字节,utf-8中文字符占三个字节,GB18030兼容GBK兼容GB2312中文字符占两个字节,ISO8859-1是拉丁字符 ...
- node 文件下载到本地 (支持中文文件名)
downloadfile:function(req,res,next){ var name= encodeURI(req.query.name); var path= req.query.url; v ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- linux下的一些命令分析与shell的一些命令
对> 与 >>的理解 echo "aaa" > aaa.txt 这个是在aaa.txt中写入aaa 可以用cat aaa.txt查看 echo &qu ...
- 关于stm32优先级大小的理解
转载自:https://www.cnblogs.com/ZKeJun/p/6112591.html 一. 组别:0>1>2>3>4 组别优先顺序(第0组优先级最强,第4组优 ...
- STM32三种启动模式 boot0 boot1
STM32三种启动模式对应的存储介质均是芯片内置的,它们是: 1)用户闪存=芯片内置的Flash.2)SRAM=芯片内置的RAM区,就是内存啦.3)系统存储器=芯片内部一块特定的区域,芯片出厂时在这个 ...
- JS页面快捷键库hotkeys.js
网友提供了一个好用的快捷键库,没有任何依赖,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb). 这里也要特别感谢园友kacper的提醒与提供 ...
- 大数据学习——akka自定义RPC
实现 package cn.itcast.akka import akka.actor.{Actor, ActorSystem, Props} import akka.actor.Actor.Rece ...
- css图像处理与动画
先讨论几个css 问题 1,css 清除浮动的方法 2,css 居中 3,多行省略号 4,小布局技巧 2D 动画功能属性兼容性:transform.transition.animation trans ...
- django html render_to_response
#coding=utf-8 from django.shortcuts import render from blog.models import BlogPost from django.short ...