React PropTypes 的使用

React PropTypes 的使用

参考:https://react.docschina.org/docs/typechecking-with-proptypes.html

在所使用 PropTypes 的页面中引入 ‘prop-types’;如果你是用脚手架创建的项目就不用下载这个包,直接引用就行

import PropTypes from 'prop-types';

1. PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的
2. 通过类型检查捕获大量错误
3. PropTypes 是对props进行检查
4. props里面存储着是父组件传给子组件的数据和方法

使用如下:

父组件传值:

在这里插入图片描述
子组件中使用PropTypes判断

1.引用

import PropTypes from 'prop-types';

2.跟创建的类是同一级别

父组件传了name index 和一个方法函数 delItem

类名.propTypes ={name:PropTypes.string,index:PropTypes.number,delItem:PropTypes.func }

在这里插入图片描述
假如:index传进来不是数字类型就会报错
在这里插入图片描述
你可以在任何 PropTypes 属性后面加上 isRequired ,确保这个 prop 没有被提供时,会打印警告信息。

例如:
父组件没有index

在这里插入图片描述
子组件需要用,给index添加了isRequired。
在这里插入图片描述
就会提示你这样的错误:
在这里插入图片描述
同理:别的也是一样的道理

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React PropTypesReact 库中的一个功能,用于对组件的属性进行类型检查。它可以帮助开发者在开发过程中捕获潜在的错误和 bug。 在使用 PropTypes 之前,需要先安装 prop-types 包。安装命令如下: ``` npm install prop-types ``` 然后,在需要进行属性类型检查的组件文件中,导入 PropTypes: ```js import PropTypes from 'prop-types'; ``` 接下来,在组件定义之后,可以使用 PropTypes 来定义组件接收的属性类型。 ```js MyComponent.propTypes = { name: PropTypes.string, age: PropTypes.number, isStudent: PropTypes.bool, onClick: PropTypes.func, config: PropTypes.shape({ title: PropTypes.string, description: PropTypes.string, }), }; ``` 上述代码中,我们通过 `PropTypes` 对象来定义了 `MyComponent` 组件接收的属性类型。例如,`name` 属性应该是一个字符串,`age` 属性应该是一个数字,`isStudent` 属性应该是一个布尔值,`onClick` 属性应该是一个函数,`config` 属性应该是一个对象,并且对象中应包含 `title` 和 `description` 两个属性。 如果传递给组件的属性类型不符合定义,React 会在开发模式下发出警告,并帮助我们找到问题所在。 PropTypes 提供了多种属性类型检查的方法,例如 `array`, `bool`, `func`, `number`, `object`, `string`, `symbol` 等等。还可以使用 `oneOfType` 来指定多个可能的属性类型,或者使用 `isRequired` 来指定某个属性是必需的。 总之,React PropTypes 是一种用于对组件属性进行类型检查的强大工具,它可以提高代码的可靠性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值