【react全家桶学习】react中组件的props属性(详)

news2025/1/23 15:00:40

学过了vue的props属性,那react中的props属性如何使用呢?

props的基本使用

我们先定义一个person组件

我们想要这三个参数动态传递进来,如何实现?

答:跟vue一样,直接在引用组件的地方进行传递即可。

在render中打印this,可以看到已经传递过来了

 在person组件中进行使用

 批量传递props

如果属性特别多,我们通过上面的方式传递十分繁琐,那如何批量传递呢?

利用扩展运算符实现:

  • 此处{ …p }的 {} 不是解构赋值的那个 {},而是react用来放置变量的 {},实际上真实的表达式只有…p,但是根据es6语法对象的展开运算符必须要包一层 {} 的,这里是因为react.development.js 和babel 将代码转义了才可以省略 {}
  • 这里的{ …p }不是解构赋值的意思,而是单纯的使用了变量表达式p,他仅仅适用于标签属性的传递

类式组件中props的使用 

 问题1:我们想要年龄加一岁如何实现?

 假如我们用这种方式传递参数,想要年龄加1

 有人说,那直接加1 就好了呀

 看下效果,变成字符串拼接了。那如何传递数字呢?

应该加上花括号,react才会去读取花括号里面的东西(还记得vue里面吗,vue是在变量名加上冒号,代表读取变量,如  :age="20"),

 这样就正常了。

 

 问题2:我们如何对props属性的类型进行限制呢?以免其他人使用时传参不规范。

在react V15.5之前,限制props的写法是:React.PropTypes 

在react V15.5之后,限制props的写法是:1、需要引入prop-types库 2、调用PropTypes

 可以看到,当我们的年纪传入一个字符串时,就会报错

 问题3:如何限制参数是否必传?

很简单,在限制类型的后面加上 .isRequired 关键字即可

不传年龄,就会报错 

问题4:当年龄不传的时候,我们如何设置一个默认值?

给组件添加 defaultProps 属性进行默认值设置 

这样,当不传年龄的时候,也不会报错了 

 

 问题5:如何传递一个函数?

假如我们传递了一个speak函数

可以看到是可行的、这点需要注意一下  函数类型的设置是 func 而不是 function

注意:props属性是只读的,不允许修改

 问题6:如何简化props?

因为在刚才的代码中我们发现,对props的处理是两个分离的模块,代码不够简化,应该将对props的处理同样放入class类里面比较好,这样跟组件相关的东西都在类里面,方便后期维护

 如下修改、写在类里面,加上static关键字(还记得之前关于类的相关知识中,static表示的是给这个类本身添加一个静态属性或方法。如果不加static就是给实例对象加的),就可以实现了

  问题7:类中的构造器接收的props到底有什么作用呢?

构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props

(这种情况几乎不存在,在构造器中我们可以直接访问props而不是this.props,因此在实际开发中构造器就是能省略就省略,作用不大)

函数式组件中props的使用

问题函数式组件中没有this,那如何拿到props属性的值呢?

他自己的本身的函数可以接收到props参数,在jsx中直接用即可

做参数限制的话不能写在函数里面了,只能放外侧,给组件自身添加propTypes和defaultProps属性即可,如下图 

注意:函数式组件局限性比较大,他只能用用props,比如上篇文章的state属性,在他身上就是不存在的,以及下一篇要讲的refs属性也是不可使用的。但类式组件存在这三大属性。 

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

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

相关文章

Java——两个链表的第一个公共节点

题目链接 牛客网在线oj题——两个链表的第一个公共节点 题目描述 输入两个无环的单向链表,找出它们的第一个公共结点,如果没有公共节点则返回空。(注意因为传入数据是链表,所以错误测试数据的提示是用其他方式显示的&#xff0…

润本“带伤”冲刺IPO,再闯“驱蚊第一股”

夏日来临,润本再度冲刺“驱蚊第一股”! 今年3月,润本生物技术股份有限公司(下称“润本”)再次更新招股书,拟在上交所主板上市。 润本是一家多品牌家庭护理产品公司, 专注于驱蚊类、个人护理类…

米哈游新游正式公测!还没上线就已经“爆了”!

米哈游制作的3D冒险主题回合制策略游戏《崩坏:星穹铁道》,在2023年4月26日正式开启全平台公测。 该游戏在2021年10月27日曾开启过“始发测试”,后继续沉淀了两年才正式开启公测。 B站的ACG内容生态丰富,其中游戏相关内容当数米哈…

C++“this”指针的使用

1.this指针的引出 先看一段代码&#xff1a; class Date { public:Date(int year0,int month0,int day0){_year year;_month month;_day day;}void Print(){cout << _year << " "<< _month << " "<< _day << end…

无需公网IP 使用SSH远程连接Linux CentOS服务器【内网穿透】

文章目录 视频教程1. Linux CentOS安装cpolar2. 创建TCP隧道3. 随机地址公网远程连接4. 固定TCP地址5. 使用固定公网TCP地址SSH远程 本次教程我们来实现如何在外公网环境下&#xff0c;SSH远程连接家里/公司的Linux CentOS服务器&#xff0c;无需公网IP&#xff0c;也不需要设置…

SDK_examples问题汇总

CompParameter 看起来可以用 拖动中间的dialog框 调整下面的参数 GraphicsViewDropEvent 点击“模型库”或者“用户模型”会弹出如下&#xff0c;点击“中止”后退出页面 MassSpringDamperApp 成功过&#xff0c;现在点击“开始仿真”会显示仿真失败 MwBatchSimPlu…

Coremail RSAC大会观察:在邮件安全领域AI既是矛也是盾

《Coremail RSAC大会观察&#xff1a;在邮件安全领域AI既是矛也是盾》 全球网络安全界的盛会——2023年RSAC大会于当地时间4月24日-27日在美国旧金山召开&#xff0c;大会以“Stronger Together&#xff08;一起变得更强大&#xff09;”为主题&#xff0c;议程主要包含安全研…

想入门网络安全?先来看看网络安全行业人才需求!

如果你是一个想要入门网络安全行业的小白、如果你是网络安全专业在读的大学生、如果你是正在找工作的新手&#xff0c;那么这篇文章你一定要仔细看。毕竟知己知彼百战百胜&#xff0c;知道行业的人才需求才能更好得发挥自己的优势。 当你打开BOSS直聘、拉钩等招聘网站&#xf…

【CTF WriteUp】2023数字中国创新大赛网络数据安全赛道决赛WP(1)

2023数字中国创新大赛网络数据安全赛道决赛WP(1) 比赛感想 不多说了&#xff0c;还是菜&#xff0c;各种不会&#xff0c;还得学 数据安全题目 Crypto-ddddmm import os from Crypto.Util.number import * from secret import flagdef genkey(bits):p getPrime(bits)q g…

网络模型与 IO 多路复用

一、基础概念1. socket2. FD&#xff1a;file descriptor**3. 内核态和用户态 二、 IO 多路复用1. 常见的IO模型2. 同步和异步3. 阻塞和非阻塞 三、 阻塞IO四、非阻塞 IO1、针对 read 函数造成的阻塞2、针对 accept函数造成的阻塞3、 select 模型4、poll模型5、epoll模型 一、基…

点成分享丨液滴生成解决方案

电源及电线为了满足用户的液滴生成需求&#xff0c;点成生物联合cellix推出了点成生物液滴生成解决方案&#xff0c;该套装可以一站式轻松满足用户液滴生成实验的需求。 Part.01 点成小科普 液滴生成&#xff0c;是一种在具备某种几何形状的微流控芯片中使用微流控泵精确控制…

Drools 规则引擎(包括动态加载数据库中规则引擎)

Drools 规则引擎 文章目录 Drools 规则引擎前言一、规则引擎是什么&#xff1f;二、Drools 简介1.引入规则引擎前后程序架构&#xff1a;2.Drools API 开发步骤&#xff1a;在这里插入图片描述 三、Drools 快速入门1.使用项目文件作为规则引擎2.使用数据库存储规则引擎 四、Dro…

【shell脚本】条件语句

一、条件测试操作 1.1test命令与 [ ] 符号 测试表达试是否成立&#xff0c;若成立返回0&#xff0c;否则返回其它数值 1.1.1文件测试常用的测试操作符 符号作用-d测试是否为目录-e测试是否为目录或文件-f测试是否为文件-r测试当前用户是否有读取权限-w测试当前用户是否有写…

2023-4-27-深入理解C++指针类型间强制转换

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f4a5;&#x1f4a5;&#x1f4a5;欢迎来到&#x1f91e;汤姆&#x1f91e;的csdn博文&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f49f;&#x1f49f;喜欢的朋友可以关注一下&#xf…

【致敬未来的攻城狮计划】— 连续打卡第十四天:FSP固件库开发延时函数(时钟详解)

系列文章目录 1.连续打卡第一天&#xff1a;提前对CPK_RA2E1是瑞萨RA系列开发板的初体验&#xff0c;了解一下 2.开发环境的选择和调试&#xff08;从零开始&#xff0c;加油&#xff09; 3.欲速则不达&#xff0c;今天是对RA2E1 基础知识的补充学习。 4.e2 studio 使用教程 5.…

数据结构_线性表、顺序表、单链表

目录 1. 线性表的定义和基本操作 1.1 线性表的定义 1.2 线性表的特点 1.3 线性表的基本操作 2. 线性表的顺序表示 2.1 顺序表的定义 2.2 顺序表上基本操作的实现 2.2.1 插入操作 2.2.2 删除操作 2.2.3 按值查找 2.3 相关练习巩固 3. 线性表的链式表示 3.1 单链表的…

Zynq-7000、FMQL45T900的GPIO控制(五)---linux应用层配置GPIO输出控制

上文中详细阐述了对应原理图MIO/EMIO的编号&#xff0c;怎么计算获取linux下gpio的编号 本文涉及C代码上传&#xff0c;下载地址 Zynq-7000、FMQL45T900的GPIO控制c语言代码资源-CSDN文库 本文详细记录一下针对获取到gpio的编号&#xff0c;进行配置输出模式&#xff0c;并进…

RobotFramework——创建项目

创建项目 实际上在Robot Framework中创建测试项目和创建单元测试项目是一致的。 robotunittest(python)Test ProjectTest ProjectTest SuitTest SuitTest CaseTest Case 1、创建测试项目 选择菜单栏 file —> New Project Name输入"TestRobot01"&#xff1b;…

从奈奎斯特采样定理推导FMCW雷达系统性能参数

本文编辑&#xff1a;调皮哥的小助理 上文从FMCW毫米波雷达系统的性能参数理解4D成像毫米波雷达的设计思路&#xff0c;谈到关于设计4D毫米波成像雷达的思路&#xff0c;其实我还忽略了一点&#xff0c;在这里补充说明一下。 在文中谈到的最小化公式中&#xff0c;分母的有效带…

vscode - 配置Prettier插件和.editorconfig文件使用介绍

文章目录 1&#xff0c;介绍2&#xff0c;Prettier插件安装3&#xff0c;全局配置&#xff08;settings.json&#xff09;4&#xff0c;局部配置&#xff08;新建.prettierrc文件&#xff09;5&#xff0c;Prettier格式化优先级&#xff08;重要&#xff09;6&#xff0c;使用p…