【React】react组件传参
【React】react组件传参
- 一、props:父组件向子组件传参
- 1、将普通的参数作为props传递
- 2、将jsx作为props传递(组件插槽)
- (1)基础功能示例
- (2)进阶示例
- 二、自定义事件:子父组件向父组件传参
- 三、context进行多级组件传参
- 四、redux全局状态管理
一、props:父组件向子组件传参
- 所有props是单向的,对于子组件来说,父组件传过来的数据都是只读的,所有不要尝试做修改
1、将普通的参数作为props传递
function Child(props: { name: String }) {const { name } = props;return (<div style={{border:'1px solid'}}><h3>我的子页面</h3>{name}</div>);
}
function App() {return (<div><h2>标题:父组件向子组件传参</h2><Child name={"我是父组件传过来的参数"} /></div>);
}

2、将jsx作为props传递(组件插槽)
- 父组件可以向子组件传递一些普通的值以外,还可以传递以下jsx,那这就不得不提到插槽的概念,如以下代码,就是利用jsx语法实现了所谓的一个插槽的概念
(1)基础功能示例
function List(props:{children:any}) {
//children会接受父元素开始和结束标签之间的内容const {children}=propsreturn <div>{children}</div>;
}
function App() {return (<div><List><li>列表项1</li><li>列表项1</li><li>列表项1</li></List><List><li>列表项2</li><li>列表项3</li><li>列表项3</li></List></div>);
}

(2)进阶示例
- 向多个位置传递jsx
function List(props: any) {//title,footer如果是可选的注意要设置默认值//如果不设置的话或包语法错误,我这里title是必选const { children, title, footer = <div>默认底部</div> } = props;return (<><h2>{title}</h2><ul>{children}</ul><div>{footer}</div></>);
}function App() {
// 优化:这里应该将下面的列表处理成一个数组包含对象的形式进行map渲染return (<div><List title="列表1" footer={<p>底部1</p>}><li>列表项1</li><li>列表项1</li><li>列表项1</li></List><List title="列表2"><li>列表项2</li><li>列表项2</li><li>列表项2</li></List></div>);
}

二、自定义事件:子父组件向父组件传参
- 通过父组件给子组件设置自定义事件,然后通过事件触发向父组件传递参数;
function Detail(props: any) {const { onActive } = props;//status为控制Detail的内容显示不显示const [status, setStatus] = useState(false);function handClick() {setStatus(!status);//将参数status传给父组件onActive(status);}return (<><button onClick={handClick}>按钮</button><p style={{ display: status ? "block" : "none" }}>Detail的内容</p></>);
}
function App() {function handActive(status: any) {// status就是子组件传过来的参数console.log(status);}return (<div>{/* 给子组件绑定一个自定义事件onActive */}<Detail onActive={handActive} /></div>);
}

三、context进行多级组件传参
import { createContext,useContext } from 'react';
createContext:在任意组件外调用 createContext 创建一个上下文,createContext 返回一个上下文对象
useContext: 是一个 React Hook,可以让你读取和订阅组件中的 context。
import React, {useContext,createContext } from 'react';
//创建 context对象
//createContext 参数 可以进行初始化操作
const MyContext= createContext(null);//Child子组件
//const 公共数据 = useContext(Context) 这里的公共数据就是根组件value的值
function Child() {const color = useContext(MyContext);return <div><h3>我的子页面</h3>颜色值是:{color}<hr /><Child1 /></div>
}//Child1子子组件
//const 公共数据 = useContext(Context) 这里的公共数据就是根组件value的值
function Child1() {const color = useContext(MyContext);return <div><h3>我的子子页面</h3>颜色值是:{color}</div>
}function App() {return (// value={ 这里放要传递的数据 }<MyContext.Provider value={"yellow"}><div><h2>useContext</h2><Child /></div></MyContext.Provider>)
}
export default App;
结论:
- Child和Child1都拿到了”yellow“
useContext会在context值变化时重新渲染,<MyContext.Provider>的value发生变化时,包裹着的子组件无论是否使用value值,都会重新渲染。
可以使用memo对未使用value的子组件进行优化,在组件更新的时候memo会检测自身包裹的组件是否有数据更新,如果没有,就会阻止自身组件的重新渲染,减少性能损耗。

四、redux全局状态管理
相关文章:
【React】react组件传参
【React】react组件传参 一、props:父组件向子组件传参1、将普通的参数作为props传递2、将jsx作为props传递(组件插槽)(1)基础功能示例(2)进阶示例 二、自定义事件:子父组件向父组件…...
Vue/html中点击复制到剪贴板
1.使用JQ实现复制功能 html <div class"tran_one tran_yi"><div class"form-group"><textarea>文本</textarea></div><div class"form-group tran_group"><div class"tran_flex tran_left tran_co…...
MtfLive直播导航PHP源码,附带系统搭建教程
将自动采集斗鱼、虎牙、触手、YY、章鱼、电视直播按分类/关键词聚合,用户选择分类,可以观看到全网该关键词下正在直播的内容。 特点 PC站和H5移动站自适应 自动缓存,避免频繁抓取数据 自定义抓取采集规则,同时支持HTML和JSON …...
day19 初始HTML
什么是HTML HTML(Hyper Text Markup Language)超文本标记语言 超文本包括:文字、图片、音频、视频、动画等 HTML5,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立&…...
从编程中理解:退一步海阔天空
编程中,“退一步海阔天空”的理念指的是在面对问题时,有时过于纠结于细节或局部优化,反而会陷入困境。这时,如果能暂时放下手中的具体工作,从更高的层面或者换个角度来审视整个系统的设计和架构,可能会发现…...
【前沿技术杂谈:开源软件】引领技术创新与商业模式的革命
【前沿技术杂谈:开源软件】引领技术创新与商业模式的革命 开源软件如何推动技术创新开源软件的开放性和协作精神促进知识共享和技术迭代推动关键技术的发展开源软件与新技术的融合 开源软件的商业模式开源软件的商业模式将开源软件与商业软件相结合 开源软件的安全风…...
c# datatable 通过反射转成泛型list
在C#中,可以使用反射来将DataTable转换为泛型列表。下面是一个示例代码,展示了如何使用反射来实现这个转换过程: using System; using System.Collections.Generic; using System.Data;public class DataConverter {public List<T> Co…...
如何保证MySQL数据一致性
在当今大数据时代,数据库系统扮演着至关重要的角色,而MySQL作为一种流行的关系型数据库管理系统,在数据一致性方面拥有着丰富的机制和技术。下面简单的探讨MySQL是如何保证数据一致性的。 事务与ACID特性 要了解MySQL如何保证数据一致性&am…...
Android学习之路(27) ProGuard,混淆,R8优化
前言 使用java编写的源代码编译后生成了对于的class文件,但是class文件是一个非常标准的文件,市面上很多软件都可以对class文件进行反编译,为了我们app的安全性,就需要使用到Android代码混淆这一功能。 针对 Java 的混淆&#x…...
进程中线程使用率偏高问题排查
1. top命令查看CPU使用率高的进程 2. top -H -p 15931(进程PID) 查看进程下的线程 3. printf "%x\n" 17503(线程PID) 线程PID 10进制转16进制 0x445f 4. jstack -l 15931(JVM进程PID) 导出java进程栈信息,里面包含线程nid0x445f和所在的类࿰…...
【JavaEE进阶】 图书管理系统开发日记——肆
文章目录 🍃前言🎍约定前后端交互接⼝🍀服务器代码实现🚩控制层🚩业务层🚩数据层 🌴前端代码的修改⭕总结 🍃前言 今天我们来实现修改图书模块 首先我们先来看一下,需要…...
STM32--USART串口(1)串口协议
一、通信接口 全双工:通信双方能够同时进行双向通信; 半双工:通信双方能够进行双向通信,但不能同时通信; 单工:只能从一个设备到另一个设备; 同步:接收方可以在时钟信号的指引下进…...
单臂路由实验(华为)
思科设备参考: 单臂路由实验(思科) 一,实验目的 在路由器的一个接口上通过配置子接口的方式,实现相互隔离的不同vlan之间互通。 二,设备配置 Switch1 <Huawei>sys [Huawei]vlan batch 10 20…...
websocket编写聊天室
【黑马程序员】WebSocket打造在线聊天室【配套资料源码】 总时长 02:45:00 共6P 此文章包含第1p-第p6的内容 简介 温馨提示:现在都是第三方支持聊天,如极光,学这个用于自己项目完全没问题,大项目不建议使用 需求分析 代码...
【论文解读】Collaboration Helps Camera Overtake LiDAR in 3D Detection
CoCa3D 摘要引言Collaborative Camera-Only 3D DetectionCollaborative depth estimationCollaborative detection feature learning 实验结论和局限 摘要 与基于 LiDAR 的检测系统相比,仅相机 3D 检测提供了一种经济的解决方案,具有简单的配置来定位 3…...
【Python实战】Python多线程批量采集图片
前言 本文来介绍如何多线程采集图片,多线程效率更快,但是,我们单一IP请求过于频繁,可能会被反爬,被封IP,所以,我们就要用到IP代理池,这里,我给大家推荐一个,可…...
【JavaEE spring】SpringBoot 统一功能处理
SpringBoot 统一功能处理 1. 拦截器1.1 拦截器快速⼊⻔1.2 拦截器详解1.2.1 拦截路径1.2.2 拦截器执⾏流程 1.3 登录校验1.3.1 定义拦截器1.3.2 注册配置拦截器 2. 统⼀数据返回格式2.1 快速⼊⻔2.2 存在问题2.3 案例代码修改2.4 优点 3. 统⼀异常处理 1. 拦截器 后端程序根据…...
小猪o2o生活通系统更新到了v24.1版本了php文件开源了提供VUE了但是车牌识别功能你真得会用吗
一.车牌识别设置项 车牌识别设置项总开关:系统后台-社区管理-社区配置-车牌识别配置。 平台需要开启车牌识别功能,其次平台可以选择车牌识别功能是由平台配置还是小区自己配置有需要提供代码的可以Q我昵称注明:CSDN网友。如果是平台自己配置&…...
Servlet+Ajax实现对数据的列表展示(极简入门)
目录 1.准备工作 1.数据库源(这里以Mysql为例) 2.映射实体类 3.模拟三层架构(Dao、Service、Controller) Dao接口 Dao实现 Service实现(这里省略Service接口) Controller层(或叫Servlet层…...
汽车租赁系统
目录 一.研究背景 二.系统架构 1、SSM 2、JAVA 3、MySQL 4、系统架构 三.系统功能 1、车辆管理 2、客户管理 3、销售管理 4、统计分析 四.系统实现 五.结论总结 一.研究背景 传统的销售与信息统计管理都主要依靠人工,处理出的销售数据量与使用管理系统…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
若依登录用户名和密码加密
/*** 获取公钥:前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...
