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

【React】组件通信

1. 组件通信

  • 组件间的数据传递
    在这里插入图片描述
1.1 父传子

步骤:

  1. 父组件传递数据——在子组件标签上绑定属性
  2. 子组件接收数据——子组件通过props参数接收数据
function Son(props) {return <div>{props.value}</div>
}function App() {const value = '父组件传给子组件的值'return (<div className="App"><Son value={value} /></div>);
}export default App;

在这里插入图片描述
-props说明:
在这里插入图片描述

function Son(props) {console.log('props', props)return <div>{props.value}</div>
}function App() {const value = '父组件传给子组件的值'return (<div className="App"><Sonvalue={value}age={100}list={['a', 'b']}obj={{ key: 11 }}isTrue={false}clickButton={() => {console.log('click button')}}dom={<span>hello</span>}/></div>);
}export default App;

在这里插入图片描述

  • 特色的prop —— children
function Son(props) {return <div>我是子组件 {props.children}</div>
}function App() {return (<div className="App"><Son><div>我就是那个特殊的prop</div></Son></div>);
}export default App;

在这里插入图片描述

1.2 子传父
  • 核心思路:子组件调用父组件的函数并传递参数
function Son(props) {return <button onClick={() => props.onUpdateMsg('子组件中的数据,我要传给父组件')}>click me</button>
}function App() {function getSonMsg(msg) {alert(msg)}return (<div className="App"><Son onUpdateMsg={getSonMsg} /></div>);
}export default App;

在这里插入图片描述

1.3 兄弟组件传值 —— 状态提升

  • 核心:传给共同的父组件,进行数据传递(子传父 + 父
    姐姐:爸爸,你跟妹妹说我是她姐姐
    爸爸:妹妹,你姐说你是她的妹妹
    哈哈哈哈哈哈哈
    在这里插入图片描述
import { useState } from 'react'
function BigSister(props) {return <button onClick={() => props.onUpdateMsg('爸爸,告诉妹妹我是她姐姐')}>click me</button>
}function SmallSister(props) {return <div>姐姐对妹妹说的:{props.value}</div>
}function App() {const [bigToSmallMsg, setBigToSmallMsg] = useState('');function getBigSisterMsg(msg) {setBigToSmallMsg(msg)}return (<div className="App"><BigSister onUpdateMsg={getBigSisterMsg} /><SmallSister value={bigToSmallMsg} /></div>);
}export default App;

在这里插入图片描述

1.4 跨层组件通信 —— context

在这里插入图片描述

import { createContext, useContext } from 'react'
// step 1
const MoneyContext = createContext()
function Father(props) {return <div>我是爸爸<Son /></div>
}function Son(props) {// step 3:消费const money = useContext(MoneyContext)return <div>我是儿子 ------<span>这是我爷爷留给我的财产:{money}</span></div>
}function App() {const money = 100000000return (// step 2: 提供<MoneyContext.Provider value={money}><div className="App">我是爷爷<Father /></div></MoneyContext.Provider>);
}export default App;

在这里插入图片描述

参考

黑马程序员react教程

相关文章:

【React】组件通信

1. 组件通信 组件间的数据传递 1.1 父传子 步骤&#xff1a; 父组件传递数据——在子组件标签上绑定属性子组件接收数据——子组件通过props参数接收数据 function Son(props) {return <div>{props.value}</div> }function App() {const value 父组件传给子…...

C++核心编程和桌面应用开发 第七天(运算符重载 智能指针)

目录 1.数组类 2.运算符重载 2.1加号运算符 2.1.1成员函数实现 2.1.2全局函数实现 2.1.3加号重载 2.2左移运算符 2.3递增运算符 2.4指针运算符 2.5赋值运算符 1.数组类 //默认构造函数 MyArray::MyArray() {m_Size 0;m_Capacity 100;pAddress new int[m_Capacity]…...

echarts地图的简单使用

echarts地图的简单使用 文章说明核心源码效果展示源码下载 文章说明 主要介绍echarts地图组件的简单使用&#xff0c;记录为文章&#xff0c;供后续查阅使用 目前只是简单的示例&#xff0c;然后还存在着一些小bug&#xff0c;主要是首个Legend的点击会导致颜色全部不展示的问题…...

Qt 项目优化实践方向

目录 1. 使用智能指针2. 避免在全局或静态作用域中使用裸指针3. 利用Qt的对象树进行资源管理4. 延迟加载和按需加载资源5. 合理使用Qt的资源文件&#xff08;qrc&#xff09;6. 监控和调试内存使用7. 优化数据结构8. 减少不必要的资源复制9. 使用缓存机制10. 遵循RAII原则 以下…...

常见的15个:自然语言处理(NLP)实战项目

自然语言处理&#xff08;NLP&#xff09;实战项目涵盖了从基础到高级的多个领域&#xff0c;以下是一些常见的NLP实战项目&#xff0c;每个项目都附带了简要的描述和可能用到的技术栈&#xff1a; 1. 文本分类&#xff08;Text Classification&#xff09; 描述: 将文本数据…...

CKKS同态加密通用函数近似方法和openFHE实现

摘要 同态加密可以直接在密文上进行运算&#xff0c;尤其是CKKS&#xff0c;可以直接在实数的密文上进行运算。服务器可以利用强大的计算能力&#xff0c;在不泄露用户隐私的情况下&#xff0c;为用户提供便捷的外包运算服务。然而&#xff0c;CKKS只能进行算术运算&#xff0…...

Webpack 5的新特性:Asset Modules与Dynamic Import

文章目录 Asset ModulesAsset Modules 类型配置示例分析 Dynamic Import动态导入语法配置示例分析 实际案例分析Asset Modules 实际案例Dynamic Import 实际案例 性能优化Asset Modules 性能优化Dynamic Import 性能优化 详细代码分析Asset Modules 代码分析Dynamic Import 代码…...

解释python requests包的timeout

解释python requests包的timeout 哈哈哈。。。。垃圾python又来了 1 问题 你能看懂下面两个timeout的含义就不用看下面的内容了。 requests.get(http://example.com, timeout(2, 5)) requests.get(http://127.0.0.1:5000/api,timeout1)官网解释&#xff01;&#xff01;&am…...

蒙语学习快速方法,速记蒙语单词怎么学习更高效!

要高效学习蒙古语和速记单词&#xff0c;首先要掌握基础知识&#xff0c;如字母表和发音规则。接着&#xff0c;专注于学习日常用语和基础词汇&#xff0c;并运用记忆技巧如联想、发音和构词法来帮助记忆。利用专门的学习软件&#xff0c;如“蒙语学习通”&#xff0c;可以提供…...

Vue3组件通信13种方法

在 Vue3 中,组件之间的通信是构建应用程序的关键 1. 父组件向子组件传递数据 (Props)「父组件:」「子组件:」 2. 子组件向父组件传递数据 (Emit)「父组件:」「子组件:」 3. 兄弟组件通信 (Mitt)「发送事件的组件:」「接收事件的组件:」 4. 透传 Attributes ($attrs)「父组件:」…...

Servlet入门:服务端小程序的初试(自己学习整理的资料)

目录 一.前言 二.建立基础结构​编辑 三.具体步骤 找到Tomcat文件并打开Tomcat。 在webapps中创建一个自己的文件夹。 在classes中新建一个Java文件。 在lib中导入需要的jar文件包。 配置环境变量 在Java文件的目录下打开cmd并输入 javac -d . HelloServlet.java进行…...

代码随想录算法训练营第三七天| 动态规划:完全背包理论基础 518.零钱兑换II 377. 组合总和 Ⅳ 322. 零钱兑换

今日任务 动态规划&#xff1a;完全背包理论基础 518.零钱兑换II 377. 组合总和 Ⅳ 322. 零钱兑换 518.零钱兑换II 题目链接&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; class Solution {public int change(int amount, int[] coins) {int[] dp new int[amount …...

[报错解决] 运行MATCHA时需要在线下载Arial.TTF字体,但是无法连接huggingface

一、报错详情 requests.exceptions.ConnectTimeout:(MaxRetryError("HTTPSConnectionPool(hosthuggingface.co, port443): Max retries exceeded with url: /ybelkada/fonts/resolve/main/Arial.TTF (Caused by ConnectTimeoutError(<urllib3.connection.HTTPSConnec…...

B-树(不是B减树)原理剖析(1)

目录 B树的主要特性&#xff1a; B树的操作&#xff1a; B树的优点&#xff1a; 为什么要发明出B-树&#xff1f; B树的概念和原理剖析 原理图讲解(部分讲解在图中) 初始化结点&#xff1a; 处理数据数量计算(了解) 底层代码实现(加深理解) 前些日子我们学了AVl树&…...

【shell脚本8】Shell脚本学习--其他

目录 ​编辑 Shell输入输出重定向 重定向深入讲解 Here Document Shell输入输出重定向 Unix 命令默认从标准输入设备(stdin)获取输入&#xff0c;将结果输出到标准输出设备(stdout)显示。一般情况下&#xff0c;标准输入设备就是键盘&#xff0c;标准输出设备就是终端&…...

《深度学习》ResNet残差网络、BN批处理层 结构、原理详解

目录 一、关于ResNet 1、什么是ResNet 2、传统卷积神经网络存在的问题 1&#xff09;梯度消失和梯度爆炸问题 2&#xff09;训练困难 3&#xff09;特征表示能力受限 4&#xff09;模型复杂度和计算负担 3、如何解决 1&#xff09;解决梯度问题 BN层重要步骤&#xff1a; 2…...

javadoc:jdk 9通过javadoc API读取java源码中的注释信息(comment)

几年前写过一博客&#xff1a;《java:通过javadoc API读取java源码中的注释信息(comment)》&#xff0c;简单介绍了通过javadoc API读取源码注释的流程。 那时还是用JDK 1.8。但是在JDK9环境下JDK 1.8的那一套API就不能用了。JDK 9提供了一套新的javadoc API实现注释代码的读取…...

nordic使用FDS保存数据需要注意的地方

FDS使用常见问题 大家在使用FDS模块时,经常碰到的问题有如下几种: FDS不支持掉电保护,所以在Flash操作过程中出现了掉电,FDS行为将未知OTA的时候,新固件的FDS page数目一定要等于老固件的FDS page数,否则将出现不可知行为fds_record_write或者fds_record_update后,强烈…...

docker-compose集群(单机多节点)环境搭建与使用

此方案已经经过生产环境验证&#xff0c;可放心大胆使用如果喜欢&#xff0c;欢迎点赞&#x1f44d;收藏❤️评论噢&#xff5e; 略去 Docker 和 Docker Compose 安装部分,如果有需要的同学&#xff0c;可以评论&#xff0c;创建 docker-compose.yml 文件并配置 Nacos 集群和 M…...

从静态多态、动态多态到虚函数表、虚函数指针

多态&#xff08;Polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;它允许不同类的对象对同一消息做出不同的响应。多态性使得可以使用统一的接口来操作不同类的对象&#xff0c;从而提高了代码的灵活性和可扩展性。 一、多态的表现形式 1. 静态多态&…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

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…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...