React使用prop-types校验传递的值类型

柔情只为你懂 2023-10-04 17:27 7阅读 0赞

子组件里需要传递的值是数组才可以，但是接收到了string类型，肯定就会报错：

![f23ca319775440d498c73f0d36532127.png][]

这时候报的错误提示是：Uncaught TypeError: this.props.colors.map is not a function，不是很明确，这时候如果有一个明确的类型错误，就好办了![87dd1e6ae4654eb7969b3e00a4b496c7.png][]

此时就用到了prop-types：

安装：

yarn add prop-types

![3d90266e6bb54f9d94225284fd8bbdc1.png][]

安装成功后，需要导入：

![1827c6b26b244b49b1ad2aecf00a39e8.png][]

然后给组件添加属性: 其中指定传递的值类型

![406668890c394461a0f78a1b8c9b0b28.png][]

再看页面报错，就知道是传递的数据类型不对：

![19033c7bf1374a9f8a3a781c9e143372.png][]

修改对应的数组类型后，就可以了

![e1e0ef4a130048dc84282a549dcf7231.png][]

[f23ca319775440d498c73f0d36532127.png]: https://img-blog.csdnimg.cn/f23ca319775440d498c73f0d36532127.png
[87dd1e6ae4654eb7969b3e00a4b496c7.png]: https://img-blog.csdnimg.cn/87dd1e6ae4654eb7969b3e00a4b496c7.png
[3d90266e6bb54f9d94225284fd8bbdc1.png]: https://img-blog.csdnimg.cn/3d90266e6bb54f9d94225284fd8bbdc1.png
[1827c6b26b244b49b1ad2aecf00a39e8.png]: https://img-blog.csdnimg.cn/1827c6b26b244b49b1ad2aecf00a39e8.png
[406668890c394461a0f78a1b8c9b0b28.png]: https://img-blog.csdnimg.cn/406668890c394461a0f78a1b8c9b0b28.png
[19033c7bf1374a9f8a3a781c9e143372.png]: https://img-blog.csdnimg.cn/19033c7bf1374a9f8a3a781c9e143372.png
[e1e0ef4a130048dc84282a549dcf7231.png]: https://img-blog.csdnimg.cn/e1e0ef4a130048dc84282a549dcf7231.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 P16:React高级-PropTypes校验传递值,使用默认值 defaultProps

React16 基础阐述 PropTypes 的简单应用浏览器中查看效果必传值的校验使用默认值 default

Dear 丶/ 2023年10月06日 20:48/ 0 赞/ 4 阅读

相关 React使用prop-types校验传递的值类型

子组件里需要传递的值是数组才可以，但是接收到了string类型，肯定就会报错： ![f23ca319775440d498c73f0d36532127.png][] 这时候报

柔情只为你懂/ 2023年10月04日 17:27/ 0 赞/ 8 阅读

相关 React 组件传参、PropTypes校验、defaultProps默认属性

> 组件化拆分，易于复用、扩展、维护。父子组件传参使用属性子组件使用PropTypes进行类型校验子组件调用父组件方法默认属性设置

红太狼/ 2023年07月09日 13:29/ 0 赞/ 13 阅读

相关 React-propTypes类型校验

有时在组件之间进行传递数据时需要对数据的类型进行校验，react 中提供了类型检查的模块 `prop-types` 通过该模块可以对传递的数据进行类型检测，出于性能方面的考虑，

待我称王封你为后i/ 2023年07月05日 13:09/ 0 赞/ 57 阅读

相关 React高级-PropTypes校验传递值

PropTypes的简单应用我们在`Xiaojiejie.js`组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用`PropTypes`限制的。在使用需要先

╰+哭是因爲堅強的太久メ/ 2023年06月15日 03:56/ 0 赞/ 9 阅读

相关 React高级-PropTypes校验传递值及ref的使用

1.PropTypes简单使用在`Xiaojiejie.js`组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用`PropTypes`限制的。在使用需要先引

旧城等待，/ 2022年12月13日 04:13/ 0 赞/ 151 阅读

相关浅谈React的类型检测——PropTypes

随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：React.PropTypes 提供很多验证器来验证传入数据的有效性，当向props

你的名字/ 2022年06月17日 13:27/ 0 赞/ 214 阅读

相关 React中静态类型校验-PropTypes学习

PropTypes学习 [官方网址详细说明][Link 1] 1.基本说明 PropTypes定义为组件类自身的属性，用以定义prop的类型。在开发模式下，当提供一

川长思鸟来/ 2022年05月30日 06:09/ 0 赞/ 208 阅读

相关 react系列（17）跨组件树传递数据 context 及 PropTypes类型集合参考

在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，当遇到多个层级多个组件间共享一个props参数，这种树形的由上而下的传参方式就显

「爱情、让人受尽委屈。」/ 2021年09月16日 23:22/ 0 赞/ 295 阅读

相关 React官网学习实践 - 使用PropTypes检查类型

随着应用日渐庞大，你可以通过类型检查捕获大量错误。对于某些应用来说，你还可以使用 [Flow][] 或 [TypeScript][] 这样的 JavsScript 扩展来对整

我会带着你远行/ 2021年06月24日 16:11/ 0 赞/ 395 阅读