[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 说起,从函数名字我们就能看 ...
随机推荐
- hdu_5154 拓扑
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...
- Mysql优化ibdata1大小
在MySQL数据库中,如果不指定innodb_file_per_table参数来单独存在每个表的数据,MySQL的数据都会存放在ibdata1文件.mysql ibdata1存放数据,索引等,是MYS ...
- 001.TypeScript简介.md
TypeScript是一门开源的,由微软开发维护的,发布于2012年10月的静态类型的语言: 他是ECMAScript的超集,支持JavaScript的所有语法和语义,并且在此基础之上提供了更多额外的 ...
- Intellij使用"easyexplore"
刚开始接触Intellij,里面有很多东西还不太会用,平时在eclipse里面用的很方便的easyexplore能帮助快速打开文件目录,Intellij中本身就有这样的功能,只是默认没有开启,需要我们 ...
- AES简单加密解密的方法实现
package com.mstf.aes; import java.io.UnsupportedEncodingException; import java.security.InvalidKeyEx ...
- jsLittle源码封装对象
window.JSLi = ((function(){ var JSLi = function(selector) { return new JSLi.fn.init(selector); }; JS ...
- E. Reachability from the Capital（tarjan+dfs）
求联通分量个数,在dfs一次 #include <iostream> #include <algorithm> #include <cstring> #includ ...
- NetBios, NetBios over TCP/IP, SMB 之间的关系
首先提到的是NetBios,NetBios是Network Basic Input/Output System的缩写,提供了一种允许局域网内不同电脑能够通信的功能.严格来说,NetBios是一套API ...
- vue之filter用法
1.全局写法: 全局过滤器必须写在vue实例创建之前. Vue.filter('testfilter', function (value,text) { // 返回处理后的值 return value ...
- Centos7：yum安装apache，编译安装php5.6，不解析php的解决方法
首先,说一下问题发生的场景: 因为懒,所以用 yum 安装 apache ,因为 centos 的源自带 php 5.4 不能符合环境要求,而不想用其他源,所以选择源码编译安装 php 5.6 安装完 ...