React第六节 组件属性prop的propTypes类型使用介绍

目前即16.8版本之后的React,将类型限制文件单独安装引入,而不再是直接挂载在 React实例上面

1、安装 PropTypes :

yarn add prop-types

2、引入 PropTypes :

import PropTypes from 'prop-types'

示例:

// 子组件中
// 引入 prop-types
import PropTypes from 'prop-types'export default function MyChild(props) {console.log('==props==', props)const {name, onChangeName, children} = propsconst handleChangeName = () => {onChangeName('Andy')}return (<div><h3>子组件中获取Props中的属性方法</h3><p>My name is: {name}</p><button type="button" onClick={handleChangeName}>修改姓名</button>{children}</div>)
}// 定义组件中 props 属性的 类型
MyChild.prototype = {name: PropTypes.string.isRequired, // 必填onChangeName: PropTypes.func, // 非必填children: PropTypes.any
}

3、PropTypes 常用的类型:

PropTypes.string字符串类型
PropTypes.number数字类型
PropTypes.bool布尔类型
PropTypes.array数组类型
PropTypes.object对象类型
PropTypes.func函数类型
PropTypes.symbol唯一的类型
PropTypes.bigint最大值类型
PropTypes.node:可以是任何可渲染的东西(字符串、数字、组件等)。
PropTypes.elementReact元素类型
PropTypes.oneOf可以是特定的几个值之一
如: PropTypes.oneOf(['success', 'failure']) 表示 failuresuccess 之一。
PropTypes.arrayOf数组中的元素类型
如: PropTypes.arrayOf(PropTypes.string) 表示字符串数组,等价于 TS 中的 string[]
PropTypes.objectOf对象的值类型
如: PropTypes.objectOf(PropTypes.string) 表示字符串对象
等价于 TS 中的 { [key: string]: string }
PropTypes.instanceOf特定类的实例
如: PropTypes.instanceOf(MyClass) 表示 MyClass 的实例。
PropTypes.shape({})特定形状的对象
PropTypes.exact限定对象类型,且可以指定对象的哪些属性必须有,哪些属性可以没有。如果出现没有定义的属性,会出现警告。
如: PropTypes.exact({ name: PropTypes.string, age: PropTypes.number }).isRequired 表示对象中包含 name 和 age 属性,且都为必填项。等价于 TS 中的 { name: string, age: number }

4、PropTypes 类型设置示例:

// 特定形状对象
MyChild.propTypes = {// 定义一个学生对象的类型studentObj: PropTypes.shape({age: PropTypes.number,name: PropTypes.string,grade: PropTypes.string})// 定义一个数组对象类型userArr:PropTypes.arrayOf(PropTypes.shape({id: PropTypes.string.required,name: PropTypes.string,age: PropTypes.number,sex: PropTypes.string})).isRequired// 定义只限定 某几个值的,status: PropTypes.oneOf(['SUCCESS', 'FAILURE'])// 定义一个 numbersObj对象,并且对象中的每一项的值 也是 number类型numbersObj: PropTypes.objectOf(PropTypes.number)
}

5、PropTypes 设置默认值:

//  类式组件中常用这种方式给定默认值;
MyChild.defaultProps  = {name: 'Andy'
}// 函数式组件中更推荐使用如下默认值export default function MyChild({name='Andy', onChengName, children}) {}

6、PropTypes 有哪些用途:

a、减少线上类型错误:PropTypes 可以在开发阶段就发现错误,减少正式环境中出现类型不匹配的问题。这有助于减少调试时间和提高代码质量。
b、规范化接口文档:通过定义 PropTypes类型,我们可以清晰地知道组件所需属性类型及数据结构。可以帮助组件使用人员更好地理解使用组件。
c、提升团队协同效率:PropTypes 可以作为团队协作的一种规范,帮助团队成员理解组件之间的关联关系和接口约定,减少了团队成员之间的沟通成本,提升团队协作效率。
d、提高维护效率:PropTypes 可以帮助我们更好地理解组件的用途。当其他成员需要修改或重构组件时,可以更快地理解组件的用途和关联关系。

更多详情请看官网 prop-types:

以上仅代表个人观点,如有错误,烦请批评指正

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/477464.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fakelocation Server服务器/专业版 Windows11

前言:需要Windows11系统 Fakelocation开源文件系统需求 Windows11 | Fakelocation | 任务一 打开 PowerShell&#xff08;以管理员身份&#xff09;命令安装 Chocolatey Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProto…

MySQL系列之身份鉴别(安全)

导览 前言Q&#xff1a;如何保障MySQL数据库身份鉴别的有效性一、有效性检查1. 用户唯一2. 启用密码验证3. 是否存在空口令用户4. 是否启用口令复杂度校验5. 是否设置口令的有效期6. 是否限制登录失败尝试次数7. 是否设置&#xff08;超过尝试次数&#xff09;锁定的最小时长8.…

MySQL面试题补

内连接和外连接的区别&#xff1a; ○1.功能和用法不同&#xff1a;内连接是连接两表都满足情况的数据&#xff1b;而外连接是以一边的表为主表&#xff0c;另一个表只显示匹配的行&#xff1b; ○2.用途&#xff1a;内连接一般是用于检索不同表需要根据共同的列值进行匹配的&a…

线程(三)【线程互斥(下)】

目录 4. 互斥锁4.1 解决数据不一致问题 5. 锁的原理5.1 加锁5.2 解锁 6. 可重入 vs 线程安全 4. 互斥锁 NAMEpthread_mutex_destroy, pthread_mutex_init - destroy and initialize a mutex // 创建、释放锁SYNOPSIS#include <pthread.h>// pthread_mutex_t: 线程库提供…

如何使用AWS Lambda构建一个云端工具(超详细)

首发地址&#xff08;欢迎大家访问&#xff09;&#xff1a;如何使用AWS Lambda构建一个云端工具&#xff08;超详细&#xff09; 1 前言 1.1 无服务器架构 无服务器架构&#xff08;Serverless Computing&#xff09;是一种云计算服务模型&#xff0c;它允许开发者构建和运行…

网络爬虫总结与未来方向

通过深入学习和实际操作&#xff0c;网络爬虫技术从基础到进阶得以系统掌握。本节将全面总结关键内容&#xff0c;并结合前沿技术趋势与最新资料&#xff0c;为开发者提供实用性强的深度思考和方案建议。 1. 网络爬虫技术发展趋势 1.1 趋势一&#xff1a;高性能分布式爬虫 随…

实验十三 生态安全评价

1 背景及目的 生态安全是生态系统完整性和健康性的整体反映&#xff0c;完整健康的生态系统具有调节气候净化污染、涵养水源、保持水土、防风固沙、减轻灾害、保护生物多样性等功能。维护生态安全对于人类生产、生活、健康及可持续发展至关重要。随着城市化进程的不断推进&…

archlinux安装waydroid

目录 参考资料 注意 第一步切换wayland 第二步安装binder核心模组 注意 开始安装 AUR安裝Waydroid 启动waydroid 设置网络&#xff08;正常的可以不看&#xff09; 注册谷歌设备 安装Arm转译器 重启即可 其他 参考资料 https://ivonblog.com/posts/archlinux-way…

鸿蒙NEXT开发案例:随机数生成

【引言】 本项目是一个简单的随机数生成器应用&#xff0c;用户可以通过设置随机数的范围和个数&#xff0c;并选择是否允许生成重复的随机数&#xff0c;来生成所需的随机数列表。生成的结果可以通过点击“复制”按钮复制到剪贴板。 【环境准备】 • 操作系统&#xff1a;W…

【Android】Service使用方法:本地服务 / 可通信服务 / 前台服务 / 远程服务(AIDL)

1 本地Service 这是最普通、最常用的后台服务Service。 1.1 使用步骤 步骤1&#xff1a;新建子类继承Service类&#xff1a;需重写父类的onCreate()、onStartCommand()、onDestroy()和onBind()方法步骤2&#xff1a;构建用于启动Service的Intent对象步骤3&#xff1a;调用st…

【LeetCode热题100】队列+宽搜

这篇博客是关于队列宽搜的几道题&#xff0c;主要包括N叉树的层序遍历、二叉树的锯齿形层序遍历、二叉树最大宽度、在每个数行中找最大值。 class Solution { public:vector<vector<int>> levelOrder(Node* root) {vector<vector<int>> ret;if(!root) …

双因子认证:统一运维平台安全管理策略

01双因子认证概述 双因子认证&#xff08;Two-Factor Authentication&#xff0c;简称2FA&#xff09;是一种身份验证机制&#xff0c;它要求用户提供两种不同类型的证据来证明自己的身份。这通常包括用户所知道的&#xff08;如密码&#xff09;、用户所拥有的&#xff08;如…

Apple Vision Pro开发002-新建项目配置

一、新建项目 可以选择默认的&#xff0c;也可以选择Universal 3D 二、切换打包平台 注意选择Target SDK为Devices SDk&#xff0c;这种适配打包到真机调试 三、升级新的Input系统 打开ProjectSettings&#xff0c;替换完毕之后引擎会重启 四、导入PolySpatial 修改上图红…

瑞佑液晶控制芯片RA6807系列介绍 (三)软件代码详解 Part.10(让PNG图片动起来)完结篇

RA6807是RA8876M的缩小版&#xff0c;具备RA8876M的所有功能&#xff0c;只将MCU控制接口进行缩减&#xff0c;仅保留SPI-3和I2C接口&#xff0c;其它功能基本相同。 该芯片最大可控制854x600的分辨率&#xff0c;内建64Mbits显存&#xff0c;多个图层&#xff0c;使用起来相当…

机器人SLAM建图与自主导航:从基础到实践

前言 这篇文章我开始和大家一起探讨机器人SLAM建图与自主导航 &#xff0c;在前面的内容中&#xff0c;我们介绍了差速轮式机器人的概念及应用&#xff0c;谈到了使用Gazebo平台搭建仿真环境的教程&#xff0c;主要是利用gmapping slam算法&#xff0c;生成一张二维的仿真环境…

一篇保姆式centos/ubuntu安装docker

前言&#xff1a; 本章节分别演示centos虚拟机&#xff0c;ubuntu虚拟机进行安装docker。 上一篇介绍&#xff1a;docker一键部署springboot项目 一&#xff1a;centos 1.卸载旧版本 yum remove docker docker-client docker-client-latest docker-common docker-latest doc…

Robot | 用 RDK 做一个小型机器人(更新中)

目录 前言架构图开发过程摄像头模型转换准备校准数据使用 hb_mapper makertbin 工具转换模型 底版开发 结语 前言 最近想开发一个小型机器人&#xff0c;碰巧看到了 RDK x5 发布了&#xff0c;参数对于我来说非常合适&#xff0c;就买了一块回来玩。 外设也是非常丰富&#xf…

如何在 UniApp 中实现 iOS 版本更新检测

随着移动应用的不断发展&#xff0c;保持应用程序的更新是必不可少的&#xff0c;这样用户才能获得更好的体验。本文将帮助你在 UniApp 中实现 iOS 版的版本更新检测和提示&#xff0c;适合刚入行的小白。我们将分步骤进行说明&#xff0c;每一步所需的代码及其解释都会一一列出…

软件工程导论 选填题知识点总结

一 原型化方法是一种动态定义需求的方法&#xff0c;提供完整定义的需求不是原型化方法的特征&#xff0c;其特征包括尽快建立初步需求、简化项目管理以及加强用户参与和决策。 软件危机的表现包括用户对已完成的软件系统不满意的现象经常发生、软件产品的质量往往靠不住、软件…

软件测试面试之常规问题

1.描述一下测试过程 类似题目:测试的生命周期 思路:这是一个“范围”很大的题目&#xff0c;而且回答时间一般在3分钟之内&#xff0c;不可能非常详细的描述整个过程&#xff0c;因此答题的思路要从整体结构入手&#xff0c;不要过细。为了保证答案的准确性&#xff0c;可以引…