【React】react组件传参

【React】react组件传参

  • 一、props:父组件向子组件传参
    • 1、将普通的参数作为props传递
    • 2、将jsx作为props传递(组件插槽)
  • 二、自定义事件:子父组件向父组件传参
  • 三、context进行多级组件传参
  • 四、redux全局状态管理

一、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,那这就不得不提到组件插槽
待补充

二、自定义事件:子父组件向父组件传参

待补充

三、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全局状态管理

待补充

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

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

相关文章

MySQL篇----第四篇

系列文章目录 文章目录 系列文章目录前言一、数据库的三范式是什么二、第一范式(1st NF - 列都是不可再分)三、第二范式(2nd NF- 每个表只描述一件事情)四、第三范式(3rd NF- 不存在对非主键列的传递依赖)五、数据库是事务前言 前些天发现了一个巨牛的人工智能学习网站,通…

C++迷宫游戏详解

个人主页&#xff1a;[PingdiGuo_guo] 收录专栏&#xff1a;[C干货专栏] 大家好呀&#xff0c;我是PingdiGuo_guo&#xff0c;今天我们来学习用C实现一个迷宫游戏。 目录 1.迷宫的具体步骤 1.1.迷宫的初始化 1.2.寻路算法 1.DFS算法 2.BFS算法 1.3.移动 2.总结 C迷宫游…

Javascript入门:第三个知识点:javascript里的数据类型、运算符

数字类型 123 //整数 123.1 //浮点数 1.123e3 //科学计数法 -10 //负数 NaN //not a number Infinity //无限大 以上的类型在javascript里都是数字类型 字符串类型 在开始之前&#xff0c;我需要先说明白两个知识点&#xff1a; console.log()是啥&#xff1f; let 与 v…

【C++初阶】C++入门(2)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、函数重载1.1 函数重载的概念1.2 函数重载的种类1.3 C支持函数重载的原理 二…

计算机网络——链路层(1)

计算机网络——链路层&#xff08;1&#xff09; 小程一言专栏链接: [link](http://t.csdnimg.cn/ZUTXU)前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff0c; [跳转到网站](https://www.captainbed.…

C语言第十七弹---指针(一)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 指针 1、内存和地址 1.1、内存 2、指针变量和地址 2.1、取地址操作符&#xff08;&&#xff09; 2.2、指针变量和解引用操作符&#xff08;*&#xff09;…

Tiktok东南亚商家如何通过直播活动提高直播流量和转化率?

一、什么是直播活动? 直播活动是帮助卖家在直播中有效推广商品和店铺的促销活动。 您报名参加直播活动后&#xff0c;您的直播将以活动品牌的形式突出展示。 您可以同时参与商品活动和直播活动&#xff0c;在直播中给买家提供超值优惠。 如何参加直播活动? 二、如何准备直…

[SWPUCTF 2021 新生赛]include

他让我们传入一个flag值 我们传入即可看到代码部分 传入一个php的伪类即可 得到经过Base64加密的flag&#xff0c;解密即可

Python基础知识:Python注释及print函数、input函数

在Python中&#xff0c;注释是对相应代码的解释&#xff0c;以增加代码的可读性&#xff0c;让用户能够更好地理解相应代码的含义。注释通过在相应代码后面加上“#”号来实现。比如以下代码 data.describe()#对数据集进行描述性分析 其中data.describe()为需要被执行的代码&a…

LED点阵屏(基于51单片机)

师从江科大 LED点阵屏 LED点阵屏由若干个独立的LED组成&#xff0c;LED以矩阵的形式排列&#xff0c;以灯珠亮灭来显示文字、图片、视频等。 LED点阵屏分类 按颜色&#xff1a;单色、双色、全彩 按像素&#xff1a;8*8、16*16等&#xff08;大规模的LED点阵通常由很多个…

MySQL原理(三)锁定机制(2)表锁行锁与页锁

前面提到&#xff0c;mysql锁按照操作颗粒分类&#xff0c;一般认为有表级锁、行级锁、页面锁三种。其实还有一种特殊的全局锁。 锁场景问题全局锁全库逻辑备份加了全局锁之后&#xff0c;整个数据库都是【只读状态】&#xff0c;如果数据库里有很多数据&#xff0c;备份就会花…

BUUCTF-Real-ThinkPHP]5.0.23-Rce

漏洞介绍 这个版本容易存在我们都喜欢的rce漏洞&#xff01; 网站为了提高访问效率往往会将用户访问过的页面存入缓存来减少开销。而Thinkphp 在使用缓存的时候是将数据序列化&#xff0c;然后存进一个 php 文件中&#xff0c;这使得命令执行等行为成为可能&#xff01; ThinkP…

Springboot 自定义参数配置化,密钥,密码,文件保存路径

application.properties 和 application.yml 都是一样的配置方法&#xff0c;只是格式不一样 定义配置文件 server.port8080 image.save.pathE:\ #自定义文件保存路径读取配置文件 Value("${image.save.path}")private String filePath;//E:\优化配置文件 如果我参…

HashMap的扩容机制

HashMap简介 HashMap在底层数据结构上采用了数组&#xff0b;链表&#xff0b;红黑树&#xff0c;通过散列映射来存储键值对数据因为在查询上使用散列码&#xff08;通过键生成一个数字作为数组下标&#xff0c;这个数字就是hash code&#xff09;所以在查询上的访问速度比较快…

备战蓝桥杯---搜索(DFS基础1)

何为深搜&#xff1f; 即不撞南墙不罢休。 话不多说&#xff0c;直接看题&#xff1a; 我们可以把这看成深搜的模板题&#xff0c;下面是AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int a[15];//存值并输出 int vis[15]; int n18; void dfs(int …

Redisson看门狗机制

一、背景 网上redis分布式锁的工具方法&#xff0c;大都满足互斥、防止死锁的特性&#xff0c;有些工具方法会满足可重入特性。如果只满足上述3种特性会有哪些隐患呢&#xff1f;redis分布式锁无法自动续期&#xff0c;比如&#xff0c;一个锁设置了1分钟超时释放&#xff0c;…

YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读

YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读 YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读一、前言二、我的环境三、yolov5s.yaml源文件内容四、Parameters五、anchors配置六、backbone七、head八、总结 OLOv5-第Y2周&#xff1a;训练自己的数据集) YOLOv5白皮书-第Y3周:yolov5s.…

从MySQL到TiDB:兼容性全解析

MySQL 在高并发和大数据量场景下&#xff0c;单个实例的扩展性有限。而 TiDB 作为一款分布式NewSQL数据库&#xff0c;设计之初就支持水平扩展&#xff08;Scale-Out&#xff09;&#xff0c;通过增加节点来线性提升处理能力和存储容量&#xff0c;能够很好地应对大规模数据和高…

机器学习——绪论总结

目录 一、引入 二、基本术语 三、假设空间与归纳偏 四、模型选择 一、引入 机器学习&#xff1a;通过计算手段&#xff0c;得出具有能够自我修改、完善能力的模型&#xff0c;利用经验改善系统自身性能。算法使用数据得到模型的过程即称为学习&#xff0c;或训练 流程&…

Framework - ActivityThread 应用启动UI渲染流程

一、概念 ActivityThread拥有 main(String[] agrs) 方法&#xff0c;作为程序的入口&#xff0c;是应用程序的初始化类。&#xff08;ActivityThread不是主线程&#xff0c;它在 main() 方法中实例化&#xff0c;是运行在主线程中。&#xff09;ApplicationThread是 ActivityT…