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

news2024/11/24 14:29:46

目前即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} = props
    const 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.coloradmin.cn/o/2246703.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sigrity SPEED2000 DDR simulation模式如何生成和解读DDR仿真报告-SODIMM-Write模式

Sigrity SPEED2000 DDR simulation模式如何生成和解读DDR仿真报告-SODIMM-Write模式 Sigrity SPEED2000 DDR simulation模式如何进行DDR仿真分析操作指导-SODIMM-Write模式详细介绍了如何进行DDR Write模式的仿真分析,下面基于此仿真结果进行DDR报告的输出和解读分析 在workfl…

【图像检测】深度学习与传统算法的区别(识别逻辑、学习能力、泛化能力)

识别逻辑 深度学习 使用了端到端的学习策略&#xff0c;直接学习从图像到检测结果的映射关系&#xff0c;自动提取特征&#xff0c;并且根据特征与特征之间的关系&#xff0c;计算出检测结果。 传统算法 则是人工提取特征&#xff0c;比如边缘特征&#xff0c;直线特征&#x…

TypeScript 系统学习 章节3

想学习 TypeScript 的小伙伴看过来&#xff0c;本文将带你一步步学习 TypeScript 入门相关的十四个知识点&#xff0c;详细的内容大纲请看下图&#xff1a; 一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集&#xff0c…

opencv undefined reference to `cv::noarray()‘ 。window系统配置opencv,找到opencv库,但连接不了

之前都是在ubuntu里用opencv&#xff0c;今天为了方便在平时用Window10系统也用下c版的cv&#xff0c;就想配置一下vscode的cv环境&#xff0c;直接下载了一个编译好的opencv库&#xff08;带build文件夹的&#xff09;&#xff0c;刚开始用的是visual studio的编译器&#xff…

利用FileZilla搭建ftp服务器

一 利用windows自带的ftp服务搭建服务器&#xff0c;要复杂一些&#xff0c;好处是无需借用外部软件。 也有一些好的工具&#xff0c;如FileZilla的Server版&#xff0c;构建过程简单&#xff0c;好用。 下面看看。 二 安装FileZilla Server 当前下载版本是0.9.43&#xf…

【刷题21】BFS解决FloodFill算法专题

目录 一、图像渲染二、岛屿数量三、岛屿的最大面积四、被环绕的区域 一、图像渲染 题目&#xff1a; 思路&#xff1a; 如果起始位置的颜色(数值)与color相同&#xff0c;直接返回该数组上下左右一层一层的找与当前位置颜色相同的&#xff0c;并且该位置不越界&#xff0c;然…

DICOM核心概念:显式 VR(Explicit VR)与隐式 VR(Implicit VR)在DICOM中的定义与区别

在DICOM&#xff08;Digital Imaging and Communications in Medicine&#xff09;标准中&#xff0c;VR&#xff08;Value Representation&#xff09; 表示数据元素的值的类型和格式。理解显式 VR&#xff08;Explicit VR&#xff09;与隐式 VR&#xff08;Implicit VR&#…

【Isaac Sim】加载自带模型或示例时报 Isaac Sim is not responding

Isaac Sim对电脑配置要求很高&#xff0c;开机第一次打开 Isaac Sim 时&#xff0c;直接就报 Isaac Sim is not responding 卡死了&#xff0c;这是由于第一次需要加载一些资源&#xff0c;耗时会导致 Isaac Sim 无响应&#xff0c;这里等一会会自动给回复。 加载自带模型或示…

如何读论文【论文精读·1】

第一遍题目 摘要 结论 方法 实验 是不是适合自己看看自己适不适合这篇文章。&#xff08;花时最少&#xff0c;做海选&#xff09; 不需要懂太具体的公式。这一遍阅读之后&#xff0c;你需要再继续思考一下这篇论文的质量以及和自己研究方向的契合程度&#xff0c;决定一下自己…

SpringBoot整合SpringSecurity实现一个简单的认证与授权应用

1、SpringSecurity 的简介 Spring Security 是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c;它是 Spring 项目组中用来提供安全认证服务的框架&#xff0c;能够为基于 Sprin g的企业应用系统提供声明式的安全访问控制解决方案。 Spring Security 的前身是 A…

CPU命名那些事

一、Intel CPU命名 1. 命名结构 Intel CPU 的命名通常包含以下几个部分&#xff1a; 品牌 产品线 系列 代数 具体型号 后缀 例如&#xff1a;Intel Core i7-13700K 2. 各部分含义 品牌 Intel&#xff1a;表示厂商&#xff08;几乎所有命名中都有&#xff09;。不同品…

爬虫与反爬-Ja3指纹风控(Just a moment...)处理方案及参数说明

概述&#xff1a;本文将针对 Ja3 指纹检测风控进行处理&#xff0c;举例了一个案例并使用两种不同的破解方案进行突破&#xff0c;同时深入了解指纹间不同字符所代表的含义 指纹检测背景&#xff1a; 1、每一个设备、软件都有独属于自己的设备信息、版本号、加密算法、椭圆算…

一篇快速上手 Axios,一个基于 Promise 的网络请求库(涉及原理实现)

Axios 1. 介绍1.1 什么是 Axios&#xff1f;1.2 axios 和 ajax 的区别 2. 安装使用3. Axios 基本使用3.1 Axios 发送请求3.2 其他方式发送请求3.3 响应结构3.4 Request Config3.5 默认配置3.6 创建实例对象发送请求 3.7 拦截器3.8 取消请求 4. 模拟 Axios4.1 axios 对象创建过程…

Java项目实战II基于SpringBoot前后端分离的网吧管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着互联网技术的不断发展…

【微软:多模态基础模型】(4)统一视觉模型

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html&#xff09;原创作品 【微软&#xff1a;多模态基础模型】&#xff08;1&#xff09;从专家到通用助手 【微软&#xff1a;多模态基础模型】&#xff08;2&#xff09;视觉理解 【微…

动态规划算法--01背包问题详细讲解步骤

举个例子 要确定哪些物品被放入背包以达到最大价值&#xff0c;可以在计算 dp 数组的同时记录选择的物品。具体来说&#xff0c;可以使用一个额外的数组来记录每个状态的选择情况。以下是一个详细的步骤和代码实现&#xff1a; n 3 W 5 weights [2, 1, 3] values [6, 3…

Jenkins的环境部署

day22 回顾 Jenkins 简介 官网Jenkins Jenkins Build great things at any scale The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project. 用来构建一切 其实就是用Java写的一个项目…

微软发布Win11 24H2系统11月可选更新KB5046740!

系统之家11月22日报道&#xff0c;微软针对Win11 24H2系统推出2024年11月最新可选更新补丁KB5046740&#xff0c;更新后系统版本后升至26100.2454&#xff0c;此次更新后修复当应用程序以PDF和XLSX格式导出图表对象时停止响应、无法使用API查找旋转信息等问题。以下小编将给大家…

JavaEE 实现 登录+注册(采用注解方式链接数据库)

&#xff08;Spring MVC的Controller练习&#xff09; 工具&#xff1a;Tomcat 10.0.23&#xff0c;MySQL&#xff0c;JDK18 一、运行效果展示 点击运行Tomcat首先进入index.jsp页面 若已有账号点击登录即可进行登录&#xff0c;这里先点击“获取ROY6账号”去注册&#xff0…

用 React18 构建点击计分小游戏

本教程将带你创建一个简单的点击计分游戏&#xff0c;使用 React 和基本的 Hooks。游戏规则很简单&#xff1a;在 10 秒内尽可能多地点击按钮以获取高分。 项目结构 确保你的项目结构如下&#xff1a; 编写 ClickGame 组件 在 src/ClickGame.js 文件中&#xff0c;编写如下…