react中使用prop-types检测props数据类型
一、为什么使用prop-types
在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。
二、学习文档
https://www.npmjs.com/package/prop-types npm官网
https://reactjs.org/docs/typechecking-with-proptypes.html react官方
三、安装与引入
//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';
四、它可以检测的类型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
五、class定义中使用方法
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// Specifies the default values for props:
Greeting.defaultProps = {
name: 'Stranger'
};
// Renders "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
六、ES7中使用方法示例
class Greeting extends React.Component {
//如果没有传递该属性时的默认值
static defaultProps = {
name: 'stranger'
}
//如果传递该属性,该属性值必须为字符串
static propTypes={
name:PropTypes.string
}
render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
七、使用isRequired设置属性为必须传递的值
static propTypes={
name:PropTypes.string.isRequired
}
八、arrOf和objectOf多重嵌套类型检测
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
//示例
static propTypes = {
todoList:PropTypes.arrayOf(PropTypes.shape({
id:PropTypes.string.isRequired,
text:PropTypes.string
}))
}
九、shape检测不同对象的不同属性的不同数据类型
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
optionalProperty: PropTypes.string,
requiredProperty: PropTypes.number.isRequired
}),
//示例
static propTypes = {
object:PropTypes.shape({
name:PropTypes.string,
age:PropTypes.number
})
}
13人点赞
作者:500薪水程序员
链接:https://www.jianshu.com/p/a73fb26c88b5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
react中使用prop-types检测props数据类型的更多相关文章
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- React中state和props分别是什么?
整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- react中直接调用子组件的方法(非props方式)
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- React中props与state
以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...
随机推荐
- java面试常见题目
JAVA相关基础知识面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用 ...
- android java socket断线重连
android java socket断线重连 thread = new Thread(new Runnable() { @Override public void run() { while (tr ...
- ThinkPHP 中 where条件 or,and 同时使用
('a'=1 and 'b'=2) or ('c'=3 and 'd'=4) and 'e'=5 $where_1['a'] = 1; $where_1['b'] = 2; $where_2['c'] ...
- php权重分配
假设有3个人 能力的权重 分别为 A=>1,B=>2,C=>3,那么当有6个案子的时候 A分配到1个,B分配到2个,C分配到3个,这很合理,但是当案子只有5个,或者有7个的时候, ...
- luogu P2812 校园网络【[USACO]Network of Schools加强版】|Tarjan
题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被♂掏♂空,他们来找你帮助他们. 题目描述 共 ...
- 简单http和https服务器python脚本
欢迎加入python学习交流群 667279387 工作经常要用到测试http和https协议,这里写了两个简单的脚本实现简单的http服务器和https服务器. http服务器代码 import s ...
- HihoCoder1466-后缀自动机六·重复旋律9
小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段字符构成的字符串. 现在小Hi已经不满足于单单演奏了!他通过向一位造诣很高的前辈请教,通过几周时间学习了创作钢琴曲的基本理论, ...
- C++与数据结构课程设计---定票咨询系统
订票咨询管理系统 设计编制一个订票管理系统,考虑旅客不同的要求.例如,选择不同的交通工具,希望在旅途中的时间尽可能地短,期望旅费尽可能省,或要求中转次数最少等.为旅客提供两种或三种最优决策.车票基本信 ...
- 矩阵解压,网络流UESTC-1962天才钱vs学霸周2
天才钱vs学霸周2 Time Limit: 500 MS Memory Limit: 128 MB Submit Status 由于上次的游戏中学霸周输了,因此学霸周想出个问题为难天才钱,问题 ...
- tensorflow tf.train.Supervisor作用
tf.train.Supervisor可以简化编程,避免显示地实现restore操作.通过一个例子看. import tensorflow as tf import numpy as np impor ...