当前位置: 首页 > news >正文

React—— props校验(非typescript校验类型)

非typescript环境下,当我们在封装组件的时候,接受props时传入的内容,需要做类型检测,那我们可以用props校验进行类型的检查。

props校验允许在创建组件的时候,就约定props的格式、类型等

实现步骤:

  • 导入 prop-types

  • 使用组件名.propTypes = {} 来给组件的props添加校验规则

  • 校验规则通过 PropTypes 对象来指定

  • 如果props想设置默认值,可以通过defaultProps去设置

    1. 常见类型:array、bool、func、number、object、string
    2. React元素类型:element
    3. 必填项:isRequired
    4. 特定结构的对象:shape({})
import PropTypes from 'prop-types'
function App(props) {return (<h1>{props.colors}</h1><h1>{props.num}</h1><h1>{props.name}</h1>)
}
// 这里约定了属性时什么类型,不然类型检测不通过,会清晰报错
App.propTypes = {colors: PropTypes.array,num:PropTypes.number,name:PropTypes.string,
}// 设置默认值
App.defaultProps = {colors: ['蓝色']nun:18,name:'hyy'
}

###React—— 类的-static 校验简写上面的校验
ES6新出的class可以帮组我们进行类型校验,我们可以定义一个类,给定其类型即默认值。

  • 实例成员: 通过实例调用的属性或者方法叫做实例成员(属性或者方法)

  • 静态成员:通过类或者构造函数本身才能访问的属性或者方法

    static可以把实例成员设置未静态成员

static的作用:简写校验、简写默认值

import PropTypes from 'prop-types'
function App(props) {return (<h1>{props.colors}</h1><h1>{props.num}</h1><h1>{props.name}</h1>)// 这里约定了属性时什么类型,不然类型检测不通过,会清晰报错
static propTypes = {colors: PropTypes.array,num:PropTypes.number,name:PropTypes.string,
}// 设置默认值
static defaultProps = {colors: ['蓝色']nun:18,name:'hyy'
}
}

相关文章:

React—— props校验(非typescript校验类型)

非typescript环境下&#xff0c;当我们在封装组件的时候&#xff0c;接受props时传入的内容&#xff0c;需要做类型检测&#xff0c;那我们可以用props校验进行类型的检查。 props校验允许在创建组件的时候&#xff0c;就约定props的格式、类型等 实现步骤&#xff1a; 导入 …...

Go——map操作及原理

一.map介绍和使用 map是一种无序的基于key-value的数据结构&#xff0c;Go语言的map是引用类型&#xff0c;必须初始化才可以使用。 1. 定义 Go语言中&#xff0c;map类型语法如下&#xff1a; map[KeyType]ValueType KeyType表示键类型ValueType表示值类型 map类型的变量默认…...

网络安全实训Day9

写在前面 访问控制和防火墙桌面端安全检测与防御 网络安全实训-网络安全技术 网络安全概述 访问控制 定义&#xff1a;通过定义策略和规则来限制哪些流量能经过防火墙&#xff0c;哪些流量不能通过。本质是包过滤 可以匹配的元素 IP协议版本 源区域和目的区域 源IP地址和目…...

kubernetes实战(1)之虚拟机centos搭建k8s集群

一&#xff0c;环境准备 centos7系统&#xff0c;每个系统2c2g&#xff0c;40g&#xff0c;centos7下载地址&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云 # 每个节点分别设置对应主机名 hostnamectl set-hostname master hostnamectl set-hostname …...

基于python+vue分类信息服务平台移动端的设计与实现flask-django-php-nodejs

分类信息服务平台是在Android操作系统下的应用平台。为防止出现兼容性及稳定性问题&#xff0c;框架选择的是django&#xff0c;Android与后台服务端之间的数据存储主要通过MySQL。用户在使用应用时产生的数据通过 python等语言传递给数据库。通过此方式促进分类信息服务平台信…...

【蓝牙协议栈】【BLE】低功耗蓝牙配对绑定过程分析(超详细)

1. 精讲蓝牙协议栈&#xff08;Bluetooth Stack&#xff09;&#xff1a;SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅&#xff0c;【蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待&#xff01…...

MySQL表内容的增删查改

在前面几章的内容中我们学习了数据库的增删查改&#xff0c;表的增删查改&#xff0c;这一篇我们来学习一下对表中的内容做增删查改。 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; 1.创建Create 我们先创建…...

Java的三大特性之一——多态(完)

前言 http://t.csdnimg.cn/0CAuc 在上一篇我们已经详讲了继承特性&#xff0c;在这我们将进行最后一个也是最重要的特性讲解——多态 在讲解之前我们需要具备对向上转型以及方法重写的初步了解&#xff0c;这有助于我们对多态的认识 1.向上转型 即实际就是创建一个子类对象…...

算法-最短路径

图的最短路径问题是一个经典的计算机科学和运筹学问题&#xff0c;旨在找到图中两个顶点之间的最短路径。这种问题在多种场景中都有应用&#xff0c;如网络路由、地图导航等。 解决图的最短路径问题有多种算法&#xff0c;其中最著名的包括&#xff1a; 1.迪杰斯特拉算法 (1).…...

【软考---系统架构设计师】特殊的操作系统介绍

目录 一、嵌入式系统&#xff08;EOS&#xff09; &#xff08;1&#xff09;嵌入式系统的特点 &#xff08;2&#xff09;硬件抽象层 &#xff08;3&#xff09;嵌入式系统的开发设计 二、实时操作系统&#xff08;RTOS&#xff09; &#xff08;1&#xff09;实时性能…...

大模型: 提示词工程(prompt engineering)

文章目录 一、什么是提示词工程二、提示词应用1、提示技巧一&#xff1a;表达清晰2、提示词技巧2&#xff1a;设置角色 一、什么是提示词工程 提示词工程主要是用于优化与大模型交互的提示或查询操作&#xff0c;其目的在于能够更加准确的获取提问者想要获取的答案&#xff0c…...

RabbitMQ的事务机制

想要保证发送者一定能把消息发送给RabbitMQ&#xff0c;一种是通过Confirm机制&#xff0c;另一种就是通过事务机制。 RabbitMQ的事务机制&#xff0c;允许生产者将一组操作打包成一个原子事务单元&#xff0c;要么全部执行成功&#xff0c;要么全部失败。事务提供了一种确保消…...

41 物体检测和目标检测数据集【李沐动手学深度学习v2课程笔记】

目录 1. 物体检测 2. 边缘框实现 3.数据集 4. 小结 1. 物体检测 2. 边缘框实现 %matplotlib inline import torch from d2l import torch as d2ld2l.set_figsize() img d2l.plt.imread(../img/catdog.jpg) d2l.plt.imshow(img);#save def box_corner_to_center(boxes):&q…...

软件包管理(rpm+yum)

1.介绍软件包安装方式 rpm包安装&#xff1a; rpm是个软件包管理工具&#xff0c;通过.rpm后缀来操作 -i #安装 -q #查询 -l #列出软件包下的文件 -e #卸载 -h, #软件包安装的时候列出哈希标记 (和 -v 一起使用效果更好) -v, #提供更多的详细信息输出 rpm的痛点&#…...

网关层针对各微服务动态修改Ribbon路由策略

目录 一、介绍 二、常规的微服务设置路由算法方式 三、通过不懈努力&#xff0c;找到解决思路 四、验证 五、总结 一、介绍 最近&#xff0c;遇到这么一个需求&#xff1a; 1、需要在网关层&#xff08;目前使用zuul&#xff09;为某一个服务指定自定义算法IP Hash路由策…...

如何从零开始拆解uni-app开发的vue项目(二)

昨天书写了一篇如何从零开始uni-app开发的vue项目,今天准备写一篇处理界面元素动态加载的案例: 背景:有不同类别的设备,每个设备有每日检查项目、每周检查项目、每年检查项目,需要维保人员,根据不同设备和检查类别对检查项目进行处理,提交数据。 首先看一下界面: &l…...

【生成对抗网络GAN】一篇文章讲透~

目录 引言 一、生成对抗网络的基本原理 1 初始化生成器和判别器 2 训练判别器 3 训练生成器 4 交替训练 5 评估和调整 二、生成对抗网络的应用领域 1 图像生成与编辑 2 语音合成与音频处理 3 文本生成与对话系统 4 数据增强与隐私保护 三、代码事例 四、生成对抗…...

【设计模式】Java 设计模式之模板命令模式(Command)

命令模式&#xff08;Command&#xff09;的深入分析与实战解读 一、概述 命令模式是一种将请求封装为对象从而使你可用不同的请求把客户端与接受请求的对象解耦的模式。在命令模式中&#xff0c;命令对象使得发送者与接收者之间解耦&#xff0c;发送者通过命令对象来执行请求…...

如何在Flutter中实现一键登录

获取到当前手机使用的手机卡号&#xff0c;直接使用这个号码进行注册、登录&#xff0c;这就是一键登录。 可以借助极光官方的极光认证实现 1、注册账户成为开发者 2、创建应用开通极光认证 &#xff08;注意开通极光认证要通过实名审核&#xff09; 3、创建应用获取appkey、 …...

Amazon SageMaker + Stable Diffusion 搭建文本生成图像模型

如果我们的计算机视觉系统要真正理解视觉世界&#xff0c;它们不仅必须能够识别图像&#xff0c;而且必须能够生成图像。文本到图像的 AI 模型仅根据简单的文字输入就可以生成图像。 近两年&#xff0c;以ChatGPT为代表的AIGC技术崭露头角&#xff0c;逐渐从学术研究的象牙塔迈…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...