一、为什么使用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人点赞

 
react

 
 
"小礼物走一走,来简书关注我"

作者:500薪水程序员
链接:https://www.jianshu.com/p/a73fb26c88b5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

react中使用prop-types检测props数据类型的更多相关文章

  1. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  2. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

  3. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  4. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  5. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  6. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  7. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  8. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  9. React中props与state

    以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...

随机推荐

  1. java面试常见题目

    JAVA相关基础知识面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用 ...

  2. android java socket断线重连

    android java socket断线重连 thread = new Thread(new Runnable() { @Override public void run() { while (tr ...

  3. 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'] ...

  4. php权重分配

    假设有3个人  能力的权重 分别为 A=>1,B=>2,C=>3,那么当有6个案子的时候  A分配到1个,B分配到2个,C分配到3个,这很合理,但是当案子只有5个,或者有7个的时候, ...

  5. luogu P2812 校园网络【[USACO]Network of Schools加强版】|Tarjan

    题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被♂掏♂空,他们来找你帮助他们. 题目描述 共 ...

  6. 简单http和https服务器python脚本

    欢迎加入python学习交流群 667279387 工作经常要用到测试http和https协议,这里写了两个简单的脚本实现简单的http服务器和https服务器. http服务器代码 import s ...

  7. HihoCoder1466-后缀自动机六·重复旋律9

    小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段字符构成的字符串. 现在小Hi已经不满足于单单演奏了!他通过向一位造诣很高的前辈请教,通过几周时间学习了创作钢琴曲的基本理论, ...

  8. C++与数据结构课程设计---定票咨询系统

    订票咨询管理系统 设计编制一个订票管理系统,考虑旅客不同的要求.例如,选择不同的交通工具,希望在旅途中的时间尽可能地短,期望旅费尽可能省,或要求中转次数最少等.为旅客提供两种或三种最优决策.车票基本信 ...

  9. 矩阵解压,网络流UESTC-1962天才钱vs学霸周2

    天才钱vs学霸周2 Time Limit: 500 MS     Memory Limit: 128 MB Submit Status 由于上次的游戏中学霸周输了,因此学霸周想出个问题为难天才钱,问题 ...

  10. tensorflow tf.train.Supervisor作用

    tf.train.Supervisor可以简化编程,避免显示地实现restore操作.通过一个例子看. import tensorflow as tf import numpy as np impor ...