当前位置: 首页 > 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. 静态多态&…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...