react 中的propTypes类型检测

咋说了，可能跟 js本身弱类型语言有关吧，当我们的react项目越来越庞大而又复杂的时候，特别是那种公共组件，如果不限制类型可能会千奇百怪的往里面传入一些数据，

除非你的文档中很详细描述每个 props 是什么类型的，或者你的项目使用 ts进行书写。

对于初学的react人员比如博主这样的，查看公共组件，或者使用公共组件，应该特别是使用这块吧，因为你要传给组件一些props 值然后就得看看一些类型的约束了，而不是由我们进行乱传。

这个 propTypes 还是需要我们简单了解了解呢， React 内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性：

需要做类型检测之前需要我们安装一个包就是 prop-types
npm i prop-types --save
或者
yarn add prop-types --save

在react的老版本中是不需要安装那个时候 react帮我们集成了，但后来就拆出来了，现在新版本的react都需要自己安装和使用了
假设我们不做限制的话

由父组件传来一个 name 和 age的值

function Demo(props) {return (<div>名字: { props.name } <br />年龄: { props.age }</div>)
}

我们在父组件中可以随意传递

<Demo name={"zhao"} age={"23"} />

就像上面的我们传递了一个 age属性但是穿的是字符串类型的 23 这个显然是不严谨的
但是程序却并没有给我报错，正常来说程序不报错就是很正常的吗？好像确实如此哈哈

接下来我们引入类型检测

import PropTypes from 'prop-types'

检测传值的类型

function Demo(props) {return (<div>名字: { props.name } <br />年龄: { props.age }</div>)
}Demo.propTypes = {name: PropTypes.string
}

然后就会发生程序会给我们报一个错误提示了

其实意思也很简单就是 age期望是一个数值类型你却给我传递了一个字符类型是不合法的
除了这些基础的字符和数字类型检测还有其他的一些

Demo.propTypes = {optionalArray: PropTypes.array,    // 检测数组optionalBool: PropTypes.bool,      // 检测布尔值optionalFunc: PropTypes.func,      // 检测函数optionalObject: PropTypes.object,  // 检测数值对象optionalSymbol: PropTypes.symbol,  // 检测是否是 symbol类型
}

但总归来说上面的是一些相对来说比较简单的检测了，还有一些比较复杂的检测类型，或者比较奇怪的类型检测

比如检测一个 React元素

Demo.propTypes = {element: PropTypes.element,
}
<Demo  element={<h2>hello world</h2>}/>

可枚举类型
只能传递枚举的数据中就像下面只能传递 News 和 Photos 这两个中的一个

Demo.propTypes = {value: PropTypes.oneOf(['News', 'Photos']),
}
<Demo  value="News" />

指定数组中有哪些类型组成

Demo.propTypes = {array: PropTypes.arrayOf(PropTypes.number)  // 纯数字array: PropTypes.arrayOf(PropTypes.string)  // 纯字符
}
<Demo  array={[1, 2, 3]} />
<Demo  array={['1', '2', '3']} />

指定对象属性中的类型

Demo.propTypes = {obj: PropTypes.shape({name: PropTypes.string,age: PropTypes.number})
}
<Demo  obj={{name: 'zhao', age: 1}} />

属性是必传的

Demo.propTypes = {age: PropTypes.any.isRequired,  // 任意类型必传name: PropTypes.string.isRequired   // 是字符串类型 且必须传递
}
<Demo age={22} />   这个会报错的
<Demo age={22} name={"zhao"}/>  // 正确

注意直接写 PropTypes.isRequired 是会出错了的

还有一个就是默认值的知识当我们prop没有传递的时候他可以使用默认值就很好了

Demo.propTypes = {age: PropTypes.any.isRequired,name: PropTypes.any.isRequired
}
Demo.defaultProps = {    // 设置默认值name: 'zhao'
}
<Demo age={22} />

总结其实类型检测不止上面的那些，而且现在的react可能老项目偏多点，
很多公共组件都是用 class进行封装的而我上面的使用函数的组件进行例子讲解，
至于后续的想要深入了解 react类型检测建议去官网复查。但工作中常用的上面的应该是够了的，加油

关注我更新前端知识 ====

react 中的propTypes类型检测相关推荐

React中的propTypes
在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型'3',而传递了一 ...
propTypes 类型检测
自 React v15.5 起,React.propTypes已移入另一个包中,需要引入prop-types库使用. 如果没有安装,请执行以下命令安装依赖: npm install prop-type ...
七十七、React中的propTypes，defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
react中的 PropTypes使用
安装 npm i prop-types 类式组件 import {Component} from 'react' import PropTypes from "prop-types" ...
react中prop-types的使用
什么是prop-types?prop代表父组件传递过来的值,types代表类型.简单来说就是用来校验父组件传递过来值的类型首先你需要通过在终端npm/yarn install/add prop-ty ...
react中props详解
1.props的基本使用 react组件之间的传值,是离不开props的代码展示: export default class Parent extends Component {render() { ...
在Java中确定文件类型
以编程方式确定文件的类型可能非常棘手,并且已经提出并实现了许多基于内容的文件标识方法. Java中有几种可用于检测文件类型的实现,其中大多数很大程度上或完全基于文件的扩展名. 这篇文章介绍了Java中 ...
我们应该如何优雅的处理 React 中受控与非受控
受控 & 非受控今天来和大家简单聊聊 React 中的受控和非受控的概念. 提到受控和非受控相信对于使用过 React 的朋友已经老生常谈了,在开始正题之前惯例先和大家聊一些关于受控 &am ...
使用=React.PropTypes进行类型检测
使用PropTypes进行类型检测随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug. 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScrip ...

react 中的propTypes类型检测

react 中的propTypes类型检测相关推荐

最新文章

热门文章