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

【React】详解组件通信:从基础到进阶的全面指南

文章目录

    • 一、父组件向子组件传递数据
      • 1. 基本概念
      • 2. 示例代码
      • 3. 详解
        • 定义子组件 `Son`
        • 定义父组件 `App`
        • 导出父组件 `App`
        • 数据流
        • `props` 的内容
    • 二、子组件向父组件传递数据
      • 1. 基本概念
      • 2. 示例代码
      • 3. 详解
        • 引入React库和useState钩子
        • 定义子组件 `Son`
        • 定义父组件 `App`
        • 导出父组件 `App`
        • 数据流
    • 三、兄弟组件之间的通信
      • 1. 基本概念
      • 2. 示例代码
      • 3. 详解
    • 四、跨层级组件之间的通信
      • 1. 基本概念
      • 2. 创建上下文
      • 3. 详解

在React开发中,组件之间的通信是一个重要且常见的需求。无论是父组件向子组件传递数据,还是子组件向父组件发送消息,理解和掌握这些通信方式都是编写高效和可维护代码的关键。本文将详细介绍React中组件通信的各种方法,包括基础的父传子、子传父,及进阶的跨层级组件通信。通过本文,你将全面了解如何在React中实现高效的组件通信。

一、父组件向子组件传递数据

1. 基本概念

父组件向子组件传递数据是React中最常见的通信方式。父组件通过在子组件标签上绑定属性,将数据作为 props 传递给子组件。

2. 示例代码

import React from 'react';function Son(props) {// props:对象里面包含了父组件传递过来的所有的数据// { name: '父组件中的数据', age: 18, ... }console.log(props);return <div>this is son, {props.name}, jsx: {props.child}</div>;
}function App() {const name = 'this is app name';return (<div><Sonname={name}age={18}isTrue={false}list={['vue', 'react']}obj={{ name: 'jack' }}cb={() => console.log(123)}child={<span>this is span</span>}/></div>);
}export default App;

3. 详解

定义子组件 Son
function Son(props) {// props:对象里面包含了父组件传递过来的所有的数据// { name: '父组件中的数据', age: 18, ... }console.log(props);return <div>this is son, {props.name}, jsx: {props.child}</div>;
}

解释:

  • Son 是一个函数组件,它接收一个参数 props
  • props 是一个对象,包含了父组件传递给子组件的所有数据。
  • 在函数体内,通过 console.log(props) 可以看到 props 的内容,其中包括多个属性。
  • return 语句返回了一段 JSX,表示子组件的 UI 结构。
    • this is son 是静态文本。
    • {props.name} 是从 props 中提取的 name 属性,显示传递过来的名字。
    • {props.child} 是从 props 中提取的 child 属性,这里传递的是一个 JSX 元素 <span>
定义父组件 App
function App() {const name = 'this is app name';return (<div><Sonname={name}age={18}isTrue={false}list={['vue', 'react']}obj={{ name: 'jack' }}cb={() => console.log(123)}child={<span>this is span</span>}/></div>);
}

解释:

  • App 是一个函数组件,它定义了一个变量 name,其值为 'this is app name'
  • return 语句中,返回了一段包含子组件 Son 的 JSX。
  • 父组件通过在子组件标签上添加属性,将数据传递给子组件:
    • name={name} 传递字符串 'this is app name'
    • age={18} 传递数字 18
    • isTrue={false} 传递布尔值 false
    • list={['vue', 'react']} 传递数组 ['vue', 'react']
    • obj={{ name: 'jack' }} 传递对象 { name: 'jack' }
    • cb={() => console.log(123)} 传递函数 () => console.log(123)
    • child={<span>this is span</span>} 传递 JSX 元素 <span>this is span</span>
导出父组件 App
export default App;

解释:

  • 使用 export default App;App 组件作为默认导出,以便在其他文件中导入并使用它。
数据流

在这个例子中,数据流是单向的,即从父组件 App 传递到子组件 Son。父组件通过 props 向子组件传递数据,子组件通过 props 对象接收这些数据并进行渲染。

props 的内容

Son 组件被渲染时,props 对象包含如下属性:

{"name": "this is app name","age": 18,"isTrue": false,"list": ["vue", "react"],"obj": { "name": "jack" },"cb": function() { console.log(123); },"child": <span>this is span</span>
}

这些属性可以在 Son 组件中通过 props 进行访问和使用。例如:

  • props.name 将返回 'this is app name'
  • props.age 将返回 18
  • props.isTrue 将返回 false
  • props.list 将返回 ['vue', 'react']
  • props.obj 将返回 { name: 'jack' }
  • props.cb 将返回 () => console.log(123)
  • props.child 将返回 <span>this is span</span>

通过这种方式,父组件和子组件之间实现了数据的传递和共享,使得组件间的通信变得简单和直观。

二、子组件向父组件传递数据

1. 基本概念

子组件向父组件传递数据通常通过回调函数实现。父组件将一个回调函数作为 props 传递给子组件,子组件在需要传递数据时调用这个回调函数,并将数据作为参数传递回父组件。

2. 示例代码

import React, { useState } from 'react';function Son(props) {const handleClick = () => {props.onDataChange('子组件传递的数据');};return <button onClick={handleClick}>传递数据给父组件</button>;
}function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><Son onDataChange={handleDataChange} /><p>父组件接收到的数据: {data}</p></div>);
}export default App;

3. 详解

引入React库和useState钩子
import React, { useState } from 'react';

这行代码引入了React库和 useState 钩子,使我们能够使用React的功能来定义和管理组件状态。

定义子组件 Son
function Son(props) {const handleClick = () => {props.onDataChange('子组件传递的数据');};return <button onClick={handleClick}>传递数据给父组件</button>;
}

解释:

  • Son 是一个函数组件,它接收一个参数 props
  • props 是一个对象,包含了父组件传递给子组件的所有数据和函数。
  • 定义了一个 handleClick 函数,当按钮被点击时,这个函数将会被调用。
  • handleClick 函数中,通过调用 props.onDataChange('子组件传递的数据'),子组件将数据 '子组件传递的数据' 传递给父组件。
  • return 语句返回了一段 JSX,表示子组件的 UI 结构:一个按钮,点击该按钮时会调用 handleClick 函数。
定义父组件 App
function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><Son onDataChange={handleDataChange} /><p>父组件接收到的数据: {data}</p></div>);
}

解释:

  • App 是一个函数组件。
  • 使用 useState 钩子定义了一个状态变量 data,初始值为空字符串 ''useState 返回一个数组,包含当前状态值 data 和更新状态的函数 setData
  • 定义了一个 handleDataChange 函数,它接受一个参数 newData。在这个函数中,调用 setData(newData) 更新状态 data
  • return语句中,返回了一段包含子组件 Son的 JSX。
    • 通过 onDataChange={handleDataChange},将 handleDataChange 函数作为 onDataChange 属性传递给子组件 Son
    • 包含一个段落元素 <p>,显示父组件接收到的数据 data
导出父组件 App
export default App;

**解释:**使用 export default App;App 组件作为默认导出,以便在其他文件中导入并使用它。

数据流

在这个例子中,数据流是双向的:

  1. 父组件向子组件传递数据:
    • 父组件 ApphandleDataChange 函数通过 onDataChange 属性传递给子组件 Son
  2. 子组件向父组件传递数据:
    • 子组件 Son 在按钮点击时,调用 props.onDataChange('子组件传递的数据'),将数据 '子组件传递的数据' 传递给父组件。
    • 父组件的 handleDataChange 函数接收数据并调用 setData(newData) 更新父组件的状态。
    • 状态更新后,父组件重新渲染,显示最新的 data

三、兄弟组件之间的通信

1. 基本概念

兄弟组件之间的通信通常需要借助于它们的共同父组件。兄弟组件通过父组件共享状态或通过回调函数实现通信。

2. 示例代码

import React, { useState } from 'react';function BrotherA(props) {const handleClick = () => {props.onDataChange('BrotherA的数据');};return <button onClick={handleClick}>传递数据给BrotherB</button>;
}function BrotherB(props) {return <p>BrotherB接收到的数据: {props.data}</p>;
}function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><BrotherA onDataChange={handleDataChange} /><BrotherB data={data} /></div>);
}export default App;

3. 详解

在上面的示例中:

  • 父组件 App 定义了一个状态 data,以及一个处理数据变化的回调函数 handleDataChange
  • 兄弟组件 BrotherABrotherB 都通过 props 接收父组件传递的数据或回调函数。
  • BrotherA 通过调用回调函数 props.onDataChange 传递数据给父组件。
  • 父组件通过更新状态,将数据传递给 BrotherB,实现兄弟组件之间的通信。

四、跨层级组件之间的通信

1. 基本概念

当需要跨越多个层级的组件之间进行通信时,可以使用React的上下文(Context)API。上下文API允许你在组件树中共享数据,而不必显式地通过每一级组件传递 props

2. 创建上下文

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function Parent() {const [data, setData] = useState('初始数据');return (<MyContext.Provider value={{ data, setData }}><Child /></MyContext.Provider>);
}function Child() {return <Grandchild />;
}function Grandchild() {const { data, setData } = useContext(MyContext);const handleClick = () => {setData('更新后的数据');};return (<div><p>接收到的数据: {data}</p><button onClick={handleClick}>更新数据</button></div>);
}export default Parent;

3. 详解

在上面的示例中:

  • 创建了一个上下文 MyContext
  • 父组件 Parent 使用 MyContext.Provider 提供数据 data 和更新函数 setData
  • 子组件 Child 和孙组件 Grandchild 通过上下文共享父组件的数据和更新函数。
  • Grandchild 使用 useContext(MyContext) 获取上下文数据,并通过调用 setData 更新数据。

在这里插入图片描述

相关文章:

【React】详解组件通信:从基础到进阶的全面指南

文章目录 一、父组件向子组件传递数据1. 基本概念2. 示例代码3. 详解定义子组件 Son定义父组件 App导出父组件 App数据流props 的内容 二、子组件向父组件传递数据1. 基本概念2. 示例代码3. 详解引入React库和useState钩子定义子组件 Son定义父组件 App导出父组件 App数据流 三…...

【vluhub】zabbix漏洞

介绍&#xff1a; zabbix是对服务器资源状态例如、内存空间、CPU、程序运行状态进行检测、设置预警值、短信设置等功能等一款开源工具。配置不当存在未授权,SQL注入漏洞 弱口令 nameadmin&passwordzabbix nameguest&password POST /index.php HTTP/1.1 Host: 192.1…...

openGauss触发器详解

openGauss 是一款开源关系型数据库管理系统&#xff0c;广泛应用于企业级应用中。随着数据量的增长和业务逻辑的复杂化&#xff0c;数据库管理和操作的自动化需求越来越高。触发器&#xff08;Triggers&#xff09;作为数据库中重要的编程工具&#xff0c;能够极大地简化复杂操…...

抄作业-跟着《React通关秘籍》捣鼓React-playground-上集

文章目录 前言1. 搭建react 开发环境2、react hooks 知识3. 目标&#xff1a;跟着小册实现 react-playground3.1 整体布局初始化项目使用Alloment 来实现左右分屏的拖拉功能 3.2 代码编辑器Monaco Editor 3.3 实现了多文件的切换用 useContext 来共享数据。优化 tab的样式&…...

80后最后的书信 年代

当时11亿人口只有1.8万部固定电话 中国几千年来 鱼传尺素 雁寄鸿书 写信最后要写 亲啓 如有照片&#xff0c;封面要写内有照片&#xff0c;请勿折叠 信的开头应该是 见字如面&#xff0c;展信舒颜 如果拜托别人做事情&#xff0c;最后要写为盼 最后要写 某某草 书未尽…...

软考-软件设计师(4)-计算机网络与安全:OSI七层、子网划分、网络安全控制技术、网络安全协议、网络安全威胁、对称与非对称加密等高频考点

场景 软考-软件设计师-计算机网络与信息安全模块高频考点整理。 以下为高频考点、知识点汇总,不代表该模块所有知识点覆盖,请以官方教程提纲为准。 注: 博客:霸道流氓气质-CSDN博客 实现 知识点 OSI/RM七层模型 注意各层的主要功能,特别是表示层负责数据的加密、压…...

Unity横板动作游戏 -为什么我又开始学习Unity,而不是Godot。

Readme 最近开始学习Unity制作2D动作游戏&#xff0c;由于一些操作第一次接触&#xff0c;为了加深印象&#xff0c;准备写这样一篇同步教程的笔记。 之前也接触过Unity&#xff0c;用 Unity 制作过一个非常简单的小游戏 Flappy Bird&#xff0c;并且魔改成了泰拉瑞亚的版本。…...

什么是NIO

NIO&#xff08;New Input/Output&#xff09;&#xff0c;也称为Java非阻塞IO&#xff0c;是从Java 1.4版本开始引入的一个新的IO API&#xff0c;旨在提供一种比传统的阻塞IO更高效、更灵活的IO操作方式。 一 NIO用法的详细介绍 NIO支持面向缓冲区的、基于通道的IO操作&…...

PHP switch 替代品 match

match 是 PHP 8 中引入的新特性。在 PHP 8 中&#xff0c;match 用作新的类型安全的替代 switch 语句。它提供了更清晰、更简洁的语法&#xff0c;同时还支持表达式作为条件&#xff0c;可以更轻松地处理复杂的条件逻辑。 在 match 表达式中&#xff0c;每个分支都是一个条件和…...

FastAPI(七十四)实战开发《在线课程学习系统》接口开发-- 删除留言

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 之前文章FastAPI&#xff08;七十三&#xff09;实战开发《在线课程学习系统》接口开发-- 回复留言&#xff0c;那么我们这次分享删除留言接口的开发…...

面试重点---快速排序

快排单趟 快速排序是我们面试中的重点&#xff0c;这个知识点也很抽象&#xff0c;需要我们很好的掌握&#xff0c;而且快速排序的代码也是非常重要&#xff0c;需要我们懂了还不行&#xff0c;必须要手撕代码&#xff0c;学的透彻。 在研究快速排序之前&#xff0c;我们首先…...

[MIT6.5840]MapReduce

MapReduce Lab 地址 https://pdos.csail.mit.edu/6.824/labs/lab-mr.html 论文地址 https://static.googleusercontent.com/media/research.google.com/zh-CN//archive/mapreduce-osdi04.pdf 工作原理 简单来讲&#xff0c;MapReduce是一种分布式框架&#xff0c;可以用来处理…...

【系统架构设计师】计算机组成与体系结构 ⑯ ( 奇偶校验码 | CRC 循环冗余码 | 海明码 | 模 2 除法 )

文章目录 一、校验码1、校验码由来2、奇偶校验码3、CRC 循环冗余码 ( 重点考点 )4、海明码校验 ( 软考不经常考到 ) 二、CRC 循环冗余码 ( 重点考点 )1、模 2 除法概念2、模 2 除法步骤3、模 2 除法示例4、CRC 循环冗余码示例 15、CRC 循环冗余码示例 2 参考之前的博客 : 【计…...

springboot,service 层统一异常抛出时,throws Exception写在接口上还是实现类上

springboot,service 层统一异常抛出时&#xff0c;throws Exception写在实现接口上&#xff0c;不是直接写在实现类上...

深度学习高效性网络

为了减轻Transformer笨重的计算成本&#xff0c;一系列工作重点开发了高效的Vision Transformer&#xff0c;如Swin Transformer、PVT、Twins、CoAtNet和MobileViT。 1、字节TRT-ViT 兼具CNN的速度、Transformer精度的模型 TRT-ViT&#xff08;Transformer-based Vision Tra…...

PyQt ERROR:ModuleNotFoundError: No module named ‘matplotlib‘

Solution:打开cmd输入指令下载malplotlib pip install matplotlib...

Flutter Geolocator插件使用指南:获取和监听地理位置

Flutter Geolocator插件使用指南&#xff1a;获取和监听地理位置 简介 geolocator 是一个Flutter插件&#xff0c;提供了一个简单易用的API来访问特定平台的地理位置服务。它支持获取设备的最后已知位置、当前位置、连续位置更新、检查设备上是否启用了位置服务&#xff0c;以…...

网站基本布局CSS

代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title></title><style type"text/css">body {margi…...

ssm框架整合,异常处理器和拦截器(纯注解开发)

目录 ssm框架整合 第一步&#xff1a;指定打包方式和导入所需要的依赖 打包方法&#xff1a;war springMVC所需依赖 解析json依赖 mybatis依赖 数据库驱动依赖 druid数据源依赖 junit依赖 第二步&#xff1a;导入tomcat插件 第三步&#xff1a;编写配置类 SpringCon…...

古籍双层PDF制作教程:保姆级古籍数字化教程

在智慧古籍数字化项目中&#xff0c;很多图书馆要求将古籍导出为双层PDF&#xff0c;并且确保输出双层PDF底层文本与上层图片偏移量控制在1毫米以内。那么本教程带你使用古籍数字化平台&#xff0c;3分钟把一个古籍书籍转化为双侧PDF。 第1步&#xff1a;上传古籍 点批量上传…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

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

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

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...