【React】关于组件之间的通讯
🌟组件化:把一个项目拆成一个一个的组件,为了便与开发与维护
组件之间互相独立且封闭,一般而言,每个组件只能使用自己的数据(组件状态私有)。
如果组件之间相互传参怎么办? 那么就要考虑组件之间的通讯。
props基本使用
props能够实现传递数据和接受数据。
作用:接收其他组件传递的数据
传递:给组件标签添加属性,就表示给组件传递数据
接收:分为函数组件和类组件
- 函数组件:通过参数
props - 类组件:通过
this.props
函数式组件使用props
// 函数组件通过props获取
function Hi(props) {return <div>{props.name}</div>
}...
...
const VNode = (<div><Hi name={'Tricia'}></Hi></div>
)
类组件使用this.props
// class 组件需要通过 this.props 来获取
class Hello extends Component {render() {return <div>接收到的数据:{this.props.age}</div>}
}
...
...
const VNode = (<div><Hello name="jack" age={19} /></div>
)

注意点:
- props只能读取对象中的属性,但是无法修改。
- 单向数据流: 数据从父组件流向子组件,即父组件的数据修改时,子组件也跟着修改
- 子组件的数据不能传递给父组件
- 🌟传递字符串时可以直接传递,传递其他数据类型时需要加
{}
组件通讯
父传子
将父组件的数据传递给子组件,数据是单向流,子组件中是只读的!
步骤:
- 父组件提供要传递的state数据
- 给子组件标签添加属性,值为state中的数据
- 子组件中通过props接收父组件传递过来的数据
- 父组件
// 定义一个父组件
class Father extends React.Component {// 父组件在state中提供数据state = {fName: '朗道',}render() {return (<><div><p>father</p>{/* 父组件数据通过子组件标签传递给子组件 */}<Son fName={this.state.fName}></Son></div></>)}
}
-
子组件中通过
this.props.属性名接收父组件中传递的数据import { Component } from 'react' class Son extends Component {render() {return (<>{/* 子组件通过this.props接收父组件传过来的数据并渲染 */}<p>Son : {this.props.fName}</p></>)} } export default Son
注意:
父传子也可以在内容里面传,用JSX。子组件接受时使用 this.props.children
import React, { Component } from 'react'
import ReactDom from 'react-dom'class AppSon extends Component {render() {console.log(this.props)return (<><h2>我是App的儿子</h2><div>{this.props.name}{this.props.age}{/* 用children来接受 */}{this.props.children}</div></>)}
}
class App extends Component {render() {return (<><h1>我是App</h1><AppSon name={'停云'} age={18098}>{/* 父传子也可以在此处传递 */}{<p>hi,我是内容</p>}</AppSon></>)}
}
ReactDom.createRoot(document.querySelector('#root')).render(<App></App>)

子传父
步骤
- 父组件提供一个回调函数,将该函数作为属性的值,传递给子组件。
- 子组件通过props调用回调函数
- 将子组件的数据作为参数传递给回调函数。
import React, { Component } from 'react'
import ReactDom from 'react-dom/client'// 子传父本质是父组件传递给子组件一个方法,子组件通过调这个方法来向父组件传参。
class AppSon extends Component {render() {return (<><h2>我是App的儿子</h2><span>{this.props.name}</span><button onClick={() => this.props.editName(this.props.name)}>点击执行父组件的方法</button></>)}
}
class App extends Component {state = {name: '冷面小青龙',}editName = (val) => {console.log(val)this.setState({name: val === '丹恒' ? '冷面小青龙' : '丹恒',})}render() {return (<><h1>我是App</h1><AppSon name={this.state.name} editName={this.editName}></AppSon></>)}
}
ReactDom.createRoot(document.querySelector('#root')).render(<App></App>)
注意
回调函数不能用普通函数,因为this指向的问题,如果是普通函数那么谁调用this就指向谁。这个函数是被this.props调用的,所以this指向的是父组件传递过去的参数
class App extends Component {state = {name: '冷面小青龙',}editName() {// 错误写法// 注意⚠️:这里不能用普通函数,因为this指向的问题,如果是普通函数那么谁调用this就指向谁。这个函数是被this.props调用的,所以this指向的是父组件传递过去的参数console.log(this)} render() {return (<><h1>我是App</h1><AppSon name={this.state.name} editName={this.editName}></AppSon></>)}
}
兄弟组件通讯(状态提升)
核心思想:状态提升
公共父组件职责:
- 提供共享状态
- 提供操作共享状态的方法
要互相通讯的两个子组件只需通过props接受或者操作状态。说白了就是。父传子 + 子传父
步骤:

- Son1通过子传父,将自己要传递的state给公共父组件
- Son2通过父传子得到这个state
import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import Son1 from './Son1'
import Son2 from './Son2'
export default class App extends Component {state = {num: '123',}editNum = (n) => {this.setState({num: +this.state.num + n,})}render() {return (<><div>App</div>{/* 通过子传父改变num值 */}<Son1 editNum={this.editNum}></Son1>{/* 父传子得到Son1的num 值 */}<Son2 num={this.state.num}></Son2></>)}
}
ReactDOM.createRoot(document.querySelector('#root')).render(<App></App>)
跨级组件通讯 - context
context: 上下文,可以理解为是一个范围,在这个范围内的所有组件都可以跨级通讯。
步骤
- 引入createContext方法,拿到Provider和Consumer
- 将createContext方法提出来,提供Provider, Consumer这两个组件并导出
- 使用Provider组件包裹整个应用,通过value属性提供要共享的数据。
- 通过Consumer组件接收共享的数据

-
context.jsx
// 公共组件:提供Provider, Consumer这两个组件// 1. 导入createcontext方法 import { createContext } from 'react' // 2. 调用方法得到两个组件 Provider, Consumer const Context = createContext() export default Context -
index.js
- 提供共享的数据和方法
- 如果要修改状态,也是将方法写在value中,最后由需要组件去调用。
import React, { Component } from 'react' import ReactDOM from 'react-dom/client' import GrandPa from './GrandPa'import Context from './Context/context' const { Provider } = Contextexport default class App extends Component {state = {num: '云浮将军景元元',age: 109776,}render() {return (// 使用Provider组件包裹根组件,并要提供value// 若要提供多个属性,可以写成对象格式<Provider value={{ name: this.state.num, age: this.state.age }}><div><h1>App</h1><GrandPa></GrandPa></div></Provider>)} }ReactDOM.createRoot(document.querySelector('#root')).render(<App></App>) -
在任意一个组件中均可使用共享的数据,例如Father.jsx
import React, { Component } from 'react' import Son from './Son' import Context from './Context/context' const { Consumer } = Context export default class Father extends Component {render() {return (<Consumer>{/* 接收state 需要将DOM放入插值中,并用箭头函数返回 */}{(obj) => (<div style={{ border: '2px solid #333', margin: '10px' }}>Father -- {obj.name}<Son></Son></div>)}</Consumer>)} } -
在Son.jsx组件中去修改状态
import React, { Component } from 'react'
import Context from './Context/context'
const { Consumer } = Context
export default class Son extends Component {render() {return (<Consumer>{(obj) => (<div style={{ border: '2px solid #333', margin: '10px' }}>Son -- {obj.age}岁<button onClick={() => obj.editAge(5)}>增加➕</button></div>)}</Consumer>)}
}

相关文章:
【React】关于组件之间的通讯
🌟组件化:把一个项目拆成一个一个的组件,为了便与开发与维护 组件之间互相独立且封闭,一般而言,每个组件只能使用自己的数据(组件状态私有)。 如果组件之间相互传参怎么办? 那么就要…...
item_get-小红薯-商品详情
一、接口参数说明: smallredbook.item_get,点击更多API调试,请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/smallredbook/item_get 名称类型必须描述keyString是调用key(http://o0…...
网络安全进阶学习第十课——MySQL手工注入
文章目录 一、MYSQL数据库常用函数二、MYSQL默认的4个系统数据库以及重点库和表三、判断数据库类型四、联合查询注入1、具体步骤(靶场演示):1)首先判断注入点2)判断是数字型还是字符型3)要判断注入点的列数…...
2.3 网络安全协议
数据参考:CISP官方 目录 OSI七层模型TCP/IP体系架构TCP/IP安全架构 一、OSI七层模型 简介 开放系统互连模型(Open System Interconnection Reference Model,OSI)是国际标准化组织(ISO)于1977年发布的…...
Apache Flink概述
Flink 是构建在数据流之上的一款有状态的流计算框架,通常被人们称为第三代大数据分析方案 第一代大数据处理方案:基于Hadoop的MapReduce 静态批处理 | Storm 实时流计算 ,两套独立的计算引擎,难度大(2014年9月&#x…...
django使用mysql数据库
Django开 发操作数据库比使用pymysql操作更简单,内部提供了ORM框架。 下面是pymysql 和orm操作数据库的示意图,pymysql就是mysql的驱动,代码直接操作pymysql ,需要自己写增删改查的语句 django 就是也可以使用pymysql、mysqlclient作为驱动&a…...
MongoDB文档--基本概念
阿丹: 不断拓展自己的技术栈,不断学习新技术。 基本概念 MongoDB中文手册|官方文档中文版 - MongoDB-CN-Manual mongdb是文档数据库 MongoDB中的记录是一个文档,它是由字段和值对组成的数据结构。MongoDB文档类似于JSON对象。字段的值可以包…...
【TypeScript】TS入门及基础学习(一)
【TypeScript】TS入门及基础学习(一) 【TypeScript】TS入门及基础学习(一)一、前言二、基本概念1.强类型语言和弱类型语言2.动态语言和静态语言 三、TypeScript与JavaScript的区别四、环境搭建及演练准备4.1 安装到本地4.2 在线运…...
Dockerfile构建LNMP镜像(yum方式)
目录 Dockerfile构建LNMP镜像 1、建立工作目录 2、编写Dockerfile文件 3、构建镜像 4、测试容器 5、浏览器访问测试: Dockerfile构建LNMP镜像 1、建立工作目录 [roothuyang1 ~]# mkdir lnmp/ [roothuyang1 ~]# cd lnmp/ 2、编写Dockerfile文件 [roothuyang1 …...
Flink Windows(窗口)详解
Windows(窗口) Windows是流计算的核心。Windows将流分成有限大小的“buckets”,我们可以在其上应用聚合计算(ProcessWindowFunction,ReduceFunction,AggregateFunction或FoldFunction)等。在Fl…...
AssetBundle学习
官方文档:AssetBundle 工作流程 - Unity 手册 (unity3d.com) 之前写的博客:AssetBundle学习_zaizai1007的博客-CSDN博客 使用流程图: 1,指定资源的AssetBundle属性 (xxxa/xxx)这里xxxa会生成目录&…...
CompletableFuture原理与实践
文章目录 1 为何需要并行加载2 并行加载的实现方式2.1 同步模型2.2 NIO异步模型2.3 为什么会选择CompletableFuture? 3 CompletableFuture使用与原理3.1 CompletableFuture的背景和定义3.1.1 CompletableFuture解决的问题3.1.2 CompletableFuture的定义 3.2 Complet…...
8.3 作业
整理思维导图 2. 递归实现,输入一个数,输出这个数的每一位 #include <myhead.h> void fun(int t) {if(t 0) return;fun(t/10);printf("%d\n",t%10); } int main(int argc,const char *argv[]) {int t1623809; fun(t);return 0; } 3.递…...
c# COM组件原理
COM(Component Object Model)是一种微软的软件组件技术,用于实现软件组件之间的互操作性。它是一种二进制接口标准,允许不同的软件组件在不同的进程中进行通信。COM组件可以用多种编程语言编写,并且可以在多个应用程序…...
Java POI 百万规模数据的导入和导出
目录 1、百万数据导入1.1 需求分析1.2 思路分析1.3 代码实现1.3.1 步骤分析1.3.2 自定义处理器1.3.3 自定义解析1.3.4 测试 2、百万数据导出2.1、概述2.2、解决方案分析2.3、原理分析2.4、百万数据的导出2.4.1、模拟数据2.4.2、思路分析2.4.3、代码实现2.4.4、测试结果 1、百万…...
如何快速用PHP取短信验证码
要用PHP获取短信验证码,通常需要连接到一个短信服务提供商的API,并通过该API发送请求来获取验证码。由于不同的短信服务提供商可能具有不同的API和授权方式,我将以一个简单的示例介绍如何使用Go语言来获取短信验证码。 在这个示例中ÿ…...
CloudStack 的 AsyncJobManagerImpl
在 CloudStack 的 AsyncJobManagerImpl 类中,下列方法的作用如下: getConfigComponentName(): 返回配置组件的名称。 getConfigKeys(): 返回与异步任务管理器相关的配置键列表。 getAsyncJob(): 根据异步任务的 ID 获取相应的异步任务对象。 findInst…...
OAuth机制_web站点接入微软azure账号进行三方登录
文章目录 ⭐前言⭐微软三方登录流程💖 web站点获取微软账号流程💖 node封装微软登录接口💖 webapp 自定义code换token💖 调用 Microsoft Graph API💖 前端唤醒authlink进行登录回调逻辑 ⭐结束 ⭐前言 大家好…...
Linux ALSA音频工具aplay、arecord、amixer的使用方法
ALSA 是Advanced Linux Sound Architecture的缩写,先进的Linux音频架构,为Linux操作系统提供音频和MIDI功能。 aplay命令 aplay是播放命令。 rootimx6ul7d:~# aplay -h Usage: aplay [OPTION]... [FILE]...-h, --help help--version …...
编写一个最简单的Linux服务端和客户端程序
2023年8月3日,周四下午 这篇文章我从下午开始写了几个小时, 这篇文件基本总结了我今天学到的知识, 在写这篇文章的过程中灵感不断涌现、想明白了很多知识点,非常酣畅淋漓。 什么叫做深度学习?这就是深度学习&#…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果