[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 说起,从函数名字我们就能看 ...
随机推荐
- 单点登录(二)使用Cookie+File实现单点登录登出（附源代码）
上一篇文章<单点登录(一)使用Cookie+File实现单点登录>中,我们实现了单点登录的功能. 本文作为上一篇文章的扩展部分,加入"单点登出"功能. 源代码下载:链接 ...
- canvas指定的宽高写在行间和写在style里面的区别？
上代码,指定的canvas宽高都一样,线条的粗细都是5px 1.宽:400:高:300:直接写在<canvas>里的效果: 2.删除<canvas>里的宽高,宽:400:高:3 ...
- JavaScript笔记（1）
JS前导: ECMA欧洲计算机制造者协会 ECMA-262 (ES5规范) ECMA-404(Json规范) wsc定义HTML.CSS.DOM规范 计算机程序分为: cpu密集(用于计算) I/O密 ...
- python 高阶函数 与关键字参数
修饰器 之前我一直有一个疑惑,就是修饰器里面对函数的操作为什么不能直接写进函数里面就好了吗?何必这么麻烦呢,当我进一步理解之后,原来修饰器的作用就是完成那些不能写进函数里面的功能的,好比必须要等到函数 ...
- 如何解决本地仓库和远程仓库的冲突（Conflict）
Background: 我有一个github仓库管理我的代码,我将这个仓库的代码clone到我的工作电脑和私人电脑本地方便我上班和在家时都可以对我的代码进行更新. 一天,我在家修改过代码之后并未提交, ...
- HDU 4917 Permutation 拓扑排序的计数
题意: 一个有n个数的排列,给你一些位置上数字的大小关系.求合法的排列有多少种. 思路: 数字的大小关系可以看做是一条有向边,这样以每个位置当点,就可以把整个排列当做一张有向图.而且题目保证有解,所以 ...
- Hdu 4930 斗地主
模拟题,只是想纪念下,WA到死了…… 看到好多代码都好长,其实想说不用这么暴力. #include <iostream> #include <cstdio> #include ...
- 1193 Eason
Eason Acceteped : 57 Submit : 129 Time Limit : 1000 MS Memory Limit : 65536 KB Description 题目描述 ...
- [React] Pass a function to setState in React
In React, when you want to set the state which calculation depends on the current state, using an ob ...
- 减少UIViewController切换的耦合
我们一般切换UIViewController的时候用的是例如以下代码 #import "UIViewControllerDemo.h" UIViewControllerDemo * ...