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

React之组件间通信

React之组件间通信

组件通信: 简单讲就是组件之间的传值,包括state、函数等

1、父子组件通信

父组件给子组件传值

核心:1、自定义属性;2、props

  • 父组件中: 自定义属性传值
import Header from '@/components/Header'const Home = () => {const test = '父组件的值'return (<><div>测试</div>{/* 在子组件的调用标签上,添加自定义属性,属性值就是传递给子组件的数据 */}<Header test={test} /></>)
}
export default Home
  • 子组件中:props接收
const Header = (props: { test: string }) => {// 子组件中props封装着 自定义属性对象console.log(props)return (<><div>header</div></>)
}
export default Header

2、子父组件通信

子组件给父组件传值
核心:1、父组件传递子组件自定义方法;2、子组件调用父组件的自定义方法,并传自己子组件的数据

  • 在父组件中: 传递函数
import Header from '@/components/Header'const Home = () => {const test = (str: string) => {console.log(str)}return (<><div>测试</div>{/* 向子组件传递自定义函数 */}<Header test={test} /></>)
}
export default Home
  • 在子组件中: 接收父组件的函数,通过向父组件函数传参的方法方式,将数据传递给父组件
interface IProps {test: ReturnType<typeof Function> // test: Function
}
const Header = (props: IProps) => {// 子组件中props封装着 自定义属性对象const str = '子组件的值'props.test(str)return (<><div>header</div></>)
}export default Header

3、非父子组件传值

兄弟组件或者其他非父子组件的传值。在Vue中使用的是自定义事件 definEmits()。但是React没有内置的自定义事件方法。需要借助第三方自定义事件,例如eventseventemitter3eventemitter2

  • 安装第三方包
$ yarn add events

ts 还需要安装

$ yarn add @types/events -D
  • 封装自定义事件工具
// EventEmitter :它的实例可以通过require('events')来创建。
import EventEmitter from 'events'const emits = new EventEmitter()
export default emits
  • 在传值的组件中,注册自定义事件
import emits from '@/utils/events'
import { useEffect } from 'react'
const Header = () => {// 注册自定义事件test// 注册自定义事件需要在useEffect中完成useEffect(() => {// 参数1: 自定义事件名// 参数2: 通信传递的值emits.emit('test', 'header 组件的值')}, [])return (<><div>header</div></>)
}export default Header
  • 在接收值的组件中,监听自定义事件
import emits from '@/utils/events'
const Footer = () => {emits.on('test', (str: string) => {console.log(str)})return (<><div>footer</div></>)
}
export default Footer

4、其他非父子组件之间的通信补充

4.1、全局状态管理:Redux全家桶

redux数据持久化
redux异步操作

4.2、React内置的上下文对象:context

  • 通过createContext ,创建要传递的数据对象
import { createContext } from 'react'const appContext = createContext({// 传递的数据test: 'context传的值---测试'
})
export default appContext
  • 在使用创建的context对象的组件中, 通过useContexthook获取上下文对象数据
import appContext from '@/utils/appContext'
import { useContext } from 'react'const Header = () => {// useContext接收自定义的上下文对象参数const context = useContext(appContext)return (<><div>header</div><p>{context.test}</p></>)
}
export default Header

相关文章:

React之组件间通信

React之组件间通信 组件通信&#xff1a; 简单讲就是组件之间的传值&#xff0c;包括state、函数等 1、父子组件通信 父组件给子组件传值 核心&#xff1a;1、自定义属性&#xff1b;2、props 父组件中: 自定义属性传值 import Header from /components/Headerconst Home ()…...

【MATLAB第58期】基于MATLAB的PCA-Kmeans、PCA-LVQ与BP神经网络分类预测模型对比

【MATLAB第58期】基于MATLAB的PCA-Kmeans、PCA-LVQ与BP神经网络分类预测模型对比 一、数据介绍 基于UCI葡萄酒数据集进行葡萄酒分类及产地预测 共包含178组样本数据&#xff0c;来源于三个葡萄酒产地&#xff0c;每组数据包含产地标签及13种化学元素含量&#xff0c;即已知类…...

CF1833 A-E

A题 题目链接&#xff1a;https://codeforces.com/problemset/problem/1833/A 基本思路&#xff1a;for循环遍历字符串s&#xff0c;依次截取字符串s的子串str&#xff0c;并保存到集合中&#xff0c;最后输出集合内元素的数目即可 AC代码&#xff1a; #include <iostrea…...

【深度学习】【Image Inpainting】Generative Image Inpainting with Contextual Attention

Generative Image Inpainting with Contextual Attention DeepFillv1 (CVPR’2018) 论文&#xff1a;https://arxiv.org/abs/1801.07892 论文代码&#xff1a;https://github.com/JiahuiYu/generative_inpainting 论文摘录 文章目录 效果一览摘要介绍论文贡献相关工作Image…...

二维深度卷积网络模型下的轴承故障诊断

1.数据集 使用凯斯西储大学轴承数据集&#xff0c;一共有4种负载下采集的数据&#xff0c;每种负载下有10种 故障状态&#xff1a;三种不同尺寸下的内圈故障、三种不同尺寸下的外圈故障、三种不同尺寸下的滚动体故障和一种正常状态 2.模型&#xff08;二维CNN&#xff09; 使…...

redis突然变慢问题定位

CPU 相关&#xff1a;使用复杂度过高命令、O&#xff08;N&#xff09;的这个N&#xff0c;数据的持久化&#xff0c;都与耗费过多的 CPU 资源有关 内存相关&#xff1a;bigkey 内存的申请和释放、数据过期、数据淘汰、碎片整理、内存大页、内存写时复制都与内存息息相关 磁盘…...

React井字棋游戏官方示例

在本篇技术博客中&#xff0c;我们将介绍一个React官方示例&#xff1a;井字棋游戏。我们将逐步讲解代码实现&#xff0c;包括游戏的组件结构、状态管理、胜者判定以及历史记录功能。让我们一起开始吧&#xff01; 项目概览 在这个井字棋游戏中&#xff0c;我们有以下组件&am…...

七大经典比较排序算法

1. 插入排序 (⭐️⭐️) &#x1f31f; 思想&#xff1a; 直接插入排序是一种简单的插入排序法&#xff0c;思想是是把待排序的数据按照下标从小到大&#xff0c;依次插入到一个已经排好的序列中&#xff0c;直至全部插入&#xff0c;得到一个新的有序序列。例如&#xff1a;…...

【点云处理教程】03使用 Python 实现地面检测

一、说明 这是我的“点云处理”教程的第3篇文章。“点云处理”教程对初学者友好&#xff0c;我们将在其中简单地介绍从数据准备到数据分割和分类的点云处理管道。 在上一教程中&#xff0c;我们在不使用 Open3D 库的情况下从深度数据计算点云。在本教程中&#xff0c;我们将首先…...

Python 日志记录:6大日志记录库的比较

Python 日志记录&#xff1a;6大日志记录库的比较 文章目录 Python 日志记录&#xff1a;6大日志记录库的比较前言一些日志框架建议1. logging - 内置的标准日志模块默认日志记录器自定义日志记录器生成结构化日志 2. Loguru - 最流行的Python第三方日志框架默认日志记录器自定…...

最近遇到一些问题的解决方案

最近遇到一些问题的解决方案 SpringBoot前后端分离参数传递方式总结Java8版本特性讲解idea使用git更新代码 : update project removeAll引发得java.lang.UnsupportedOperationException异常Java的split()函数用多个不同符号分割 Aspect注解切面demo 抽取公共组件&#xff0c;使…...

封装hutool工具生成JWT token

private static final String KEY "abcdef";/*** 生成token** param payload 可以存放用户的一些信息&#xff0c;不要存放敏感字段* return*/public static String createToken(Map<String, Object> payload) {//十分重要&#xff0c;不禁用发布到生产环境无…...

【手机】三星手机刷机解决SecSetupWizard已停止

三星手机恢复出厂设置之后&#xff0c;出现SecSetupWizard已停止的解决方案 零、问题 我手上有一部同学给的三星 GT-S6812I&#xff0c;这几天搞了张新卡&#xff0c;多余出的卡就放到这个手机上玩去了。因为是获取了root权限的&#xff08;直接使用KingRoot就可以&#xff0…...

GDAL C++ API 学习之路 OGRGeometry 抽象曲线基类 OGRCurve

OGRCurve class "ogrsf_frmts.h" OGRCurve 是 OGR&#xff08;OpenGIS Simple Features Reference Implementation&#xff09;几何库中的一个基类&#xff0c;表示曲线几何对象。它是 OGRLineString 和 OGRCircularString 的抽象基类&#xff0c;用于表示曲…...

etcd底层支持的数据库有哪些

etcd底层的数据库可以更换。在当前版本的etcd中&#xff0c;它使用的是BoltDB作为默认的后端存储引擎。但是&#xff0c;etcd提供了接口允许您更换数据库后端&#xff0c;以便根据需要选择更合适的存储引擎。 以下是etcd支持的一些后端数据库选项&#xff1a; BoltDB&#xff…...

linux设备驱动的poll与fasync

什么是fasync 在 Linux 驱动程序中&#xff0c;fasync 是一种机制&#xff0c;用于在异步事件发生时通知进程。它允许进程在等待设备事件时&#xff0c;不必像传统的轮询方式那样持续地查询设备状态。 具体来说&#xff0c;当进程调用 fcntl(fd, F_SETFL, O_ASYNC) 函数时&am…...

TortoiseGit安装与配置

注&#xff1a;在安装TortoiseGit之前我已经安装了git工具。 二、Git的诞生及环境配置_tortoisegit安装包_朱嘉鼎的博客-CSDN博客 1、TortoiseGit简介 TortoiseGit是基于TortoiseSVN的Git版本的Windows Shell界面。它是开源的&#xff0c;可以完全免费使用。 TortoiseGit 支持…...

Java代码打印空心菱形(小练习)

回看基础 利用Java代码打印一个空心菱形 //5. 打印空心菱形 import java.util.Scanner; public class MulForExercise01 {//编写一个 main 方法public static void main(String[] args) {Scanner myScanner new Scanner(System.in);System.out.println("请输入正三角的行…...

【性能优化】MySQL百万数据深度分页优化思路分析

业务场景 一般在项目开发中会有很多的统计数据需要进行上报分析&#xff0c;一般在分析过后会在后台展示出来给运营和产品进行分页查看&#xff0c;最常见的一种就是根据日期进行筛选。这种统计数据随着时间的推移数据量会慢慢的变大&#xff0c;达到百万、千万条数据只是时间问…...

交叉编译工具链的安装、配置、使用

一、交叉编译的概念 交叉编译是在一个平台上生成另一个平台上的可执行代码。 编译&#xff1a;一个平台上生成在该平台上的可执行文件。 例如&#xff1a;我们的Windows上面编写的C51代码&#xff0c;并编译成可执行的代码&#xff0c;如xx.hex.在C51上面运行。 我们在Ubunt…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...