[React] Validate Custom React Component Props with PropTypes
In this lesson we'll learn about how you can use the prop-types module to validate a custom React component's props.
You can write you own PropTypes vlidators like such:
const PropTypes = {
string(props, propName, componentName) {
if(typeof props[propName] !== 'string') {
return new Error(
`You should pass a string for ${propName} but you pass ${typeof props[propName]}`
)
}
}
}
Because this is commonly used, so we can use React libs for that:
https://www.npmjs.com/package/prop-types
<body>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.6.0/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<div id="root"></div> <script type="text/babel">
class SayHello extends React.Component {
static propTypes = {
firstName: PropTypes.string.isRequired,
lastName: PropTypes.string.isRequired,
} render() {
return (
<div>
Hello {this.props.firstName} {this.props.lastName}!
</div>
)
}
} ReactDOM.render(
<SayHello firstName={true} />,
document.getElementById('root')
)
</script>
</body>
For producation, PropTypes is not necessary, and will slow down the proferemence, so we can remove it by using the babel plugin:
https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types
[React] Validate Custom React Component Props with PropTypes的更多相关文章
- react Props 验证 propTypes，
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- [React] Spread Component Props in JSX with React
You often find duplication between the name of a prop and a variable you will assign to the prop. JS ...
- A Bite Of React(2) Component, Props and State
component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...
- React.createClass和extends Component的区别
React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React 深入系列３：Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...
- React.Component 与 React.PureComponent（React之性能优化）
前言 先说说 shouldComponentUpdate 提起React.PureComponent,我们还要从一个生命周期函数 shouldComponentUpdate 说起,从函数名字我们就能看 ...
随机推荐
- 基于IBM Bluemix的数据缓存应用实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:IBM® Data Cache for Bluemix 是快速缓存服务.支持 Web 和 ...
- bzoj1026: [SCOI2009]windy数（传说你是数位DP）
1026: [SCOI2009]windy数 题目:传送门 题解: 其实之前年少无知的时候好像A过...表示当时并不知道什么数位DP 今天回来深造一发... 其实如果对这个算法稍有了解...看到这题的 ...
- java9新特性-7-语法改进：接口的私有方法
1.官方Feature 213: Milling Project Coin Support for private methods in interfaces was briefly in consi ...
- webService接口发布失败问题
今天在原有工程上新增加了个webService接口的服务类,但是总提示 axis2 出错 File "/axis2-web/listSingleService.jsp" not f ...
- 谈谈Vim中实用又好记的一些命令
本文的目的在于总结一些日常操作中比较实用.有规律的Vim命令,而不致于介绍一些基础的Vim知识,比如几种插入模式,hjkl移动命令,dd删除本行,p粘贴 等等,故对Vim基本知识不够熟悉的请参见其 ...
- nginx直接连接操作memcache
原理: Nginx 要设定一个 key 去查 mem ,如果没查到,要有一个回调 php ,并且 key 传给 php. 配置方式: server{ ...
- 解决mongodb TypeError: Cannot read property 'XXX' of null 问题
有时候我们的字段里的数据为空而去查询就会报错. 比如以下形式: “cartList”:[] “cartList”:[{}] “cartList”:{} “cartList”:null 在查询的时候加上 ...
- [Bug]Python3.x AttributeError: libtest.so: undefined symbol: fact
写kNN,需要在python中实现kd-tree 思考了一下,在python下写这种算法类的东西,还是十分别扭 于是希望用ctypes调用一下c++动态加载库 于是尝试实现一下 // test.cpp ...
- CF732F Tourist Reform（边双联通）
题意 在一张有向图中,设 ri 为从点 i 出发能够到达的点的数量. 定义有向图的“改良值”为 ri 的最小值. 现给出一张无向图,要求给每条边定一个方向,使产生的有向图“改良值”最大. 输出 最大改 ...
- 为什么使用Nginx & Nginx的使用
Nginx在Windows平台的配置: 什么是Nginx? 根据前面的对比,我们可以了解到Nginx是一个http服务器.是一个使用c语言开发的高性能的http服务器及反向代理服务器.Nginx是一款 ...