[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 说起,从函数名字我们就能看 ...
随机推荐
- poj_3468,线段树成段更新
参考自http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #include& ...
- java生成MD5校验码
在Java中,java.security.MessageDigest (rt.jar中)已经定义了 MD5 的计算,所以我们只需要简单地调用即可得到 MD5 的128 位整数.然后将此 128 位计 ...
- tomcat：Could not publish to the server. java.lang.IndexOutOfBoundsException
1.将工程加入到tomcat,报上述错误 2. run--maven build 报jar包错误: invalid LOC header (bad signature) 3.根据提示找到上述jar包, ...
- 002.ES2015和ES2016新特性--箭头函数.md
1. ES2015中的箭头函数 JavaScript有一级函数的特性,也就是说,函数像其他值一样可以当成参数传来传去. var result = [1,2,3].reduce(function(tot ...
- Ambari Confirm Hosts Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).解决 Permanently added 'hdp21,192. ...
- Linux常用命令及其英文全称
alias:给命令起别名 awk = "Aho Weiberger and Kernighan" ,三个作者的姓的第一个字母 bash:GNU Bourne-Again She ...
- 学习优化《机器学习与优化》中文PDF+英文PDF
正在学习机器学习中的优化处理,感觉<机器学习与优化>写得还是比较通俗易懂的,第七章特征选择我需要,特征提取:相关系数,相关比,熵和互信息..更高级的应该是文本挖掘的特征提取,比如LDA提取 ...
- python supper()函数
参考链接:https://www.runoob.com/python/python-func-super.html super() 函数是用于调用父类(超类)的一个方法. class Field(ob ...
- caioj 1078 动态规划入门（非常规DP2：不重叠线段）（状态定义问题）
我一开始想的是前i个区间的最大值 显然对于当前的区间,有不选和选两种情况 如果不选的话,就继承f[i-1] 如果选的话,找离当前区间最近的区间取最优 f[i] = max(f[i-1, f[j] + ...
- Spring Cloud学习笔记【六】Hystrix 监控数据聚合 Turbine
上一篇我们介绍了使用 Hystrix Dashboard 来展示 Hystrix 用于熔断的各项度量指标.通过 Hystrix Dashboard,我们可以方便的查看服务实例的综合情况,比如:服务调用 ...