[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 说起,从函数名字我们就能看 ...
随机推荐
- css 清楚浮动的8种方式
清除浮动是每个 web前台设计师必须掌握的机能. css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同一时候会影响到前后标签.父级标签的位置及 width height 属性.并且相 ...
- js 使用(不断更新...)
1.JS 对象(Object)和字符串(String)互转 var jsObj = {}; jsObj.testArray = [1, 2, 3, 4, 5]; jsObj.name = 'CSS3' ...
- 获取当前最上层controller
- (UIViewController *)topViewController { UIViewController *resultVC; resultVC = [self _topViewContr ...
- 25.不改变原生数据的STL algorithm
通过仿函数for_each操作 vector<,,,, }; list<double> db{ 1.1,2.2,3.3,4.4,5.5 }; //循环算法,算法的泛型 print p ...
- ReactiveCocoa 中 RACSignal 是如何发送信号的
https://juejin.im/post/5829f4c3570c350063c436ac 前言 ReactiveCocoa是一个(第一个?)将函数响应式编程范例带入Objective-C的开源库 ...
- tensorflow 1 - 起步
使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使用 tensor 表示数据. 通过 变量 (Variable) 维护状态. ...
- type与isinstance使用区别
Python中,type与isinstance都可以用来判断变量的类型,但是type具有一定的适用性,用它来判断变量并不总是能够获取到正确的值. Python在定义变量的时候不用指明具体的的类型,解释 ...
- ES6学习笔记（十七）Class 的基本语法
1.简介 类的由来 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子. function Point(x, y) { this.x = x; this.y = y; ...
- SQL替换制表、回车、换行符和首尾空格
SQL替换制表.回车.换行符和首尾空格 最近在批量修复数据的时候,需要利用excel导入大量数据.客户提供的数据是没有规范的,大部分数据行都有制表符.回车符.换货符,以及我需要将数据进行首位去重. 目 ...
- Python3 利用POP3与smtplib进行计算机远程控制
初习,代码有不足之处,欢迎指出. 跟大家分享的是,通过发送端发送cmd命令,从而对接收端进行cmd命令的控制. #接收端代码 from poplib import POP3 import time,o ...