react中使用prop-types检测props数据类型

Posted zhx119

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,

五、使用isRequired设置属性为必须传递的值

 static propTypes=
    name:PropTypes.string.isRequired
  

六、使用defaultProps

TodoItem.propTypes = 
test:Proptypes.string.isRequired,
item : Proptypes.string,
deleteItem: Proptypes.func,
index : Proptypes.number

TodoItem.defaultProps =
test:‘hello‘

以上是关于react中使用prop-types检测props数据类型的主要内容,如果未能解决你的问题,请参考以下文章

React中的类型检测prop-types的基本使用

React中的类型检测prop-types的基本使用

react中prop-types的使用

react prop-types

为啥系统在“prop-types”中寻找“react-is”?

如何在文件中禁用 ESLint react/prop-types 规则?