react组件通信方式

1. 父组件向子组件通信

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const message = 'Hello from parent!';return (<div><ChildComponent message={message} /></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';function ChildComponent(props) {return (<div><p>{props.message}</p></div>);
}export default ChildComponent;

2. 子组件向父组件通信

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const [message, setMessage] = useState('');const handleMessage = (msg) => {setMessage(msg);};return (<div><ChildComponent onMessage={handleMessage} /><p>Message from child: {message}</p></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';function ChildComponent(props) {const sendMessage = () => {props.onMessage('Hello from child!');};return (<button onClick={sendMessage}>Send Message</button>);
}export default ChildComponent;

3. 跨级组件通信

// App.js
import React, { createContext, useContext } from 'react';
import GrandParentComponent from './GrandParentComponent';const MessageContext = createContext();function App() {return (<MessageContext.Provider value={'Hello from App!'}><GrandParentComponent /></MessageContext.Provider>);
}export default App;// GrandParentComponent.js
import React from 'react';
import ParentComponent from './ParentComponent';function GrandParentComponent() {return (<div><ParentComponent /></div>);
}export default GrandParentComponent;// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
import { MessageContext } from '../App';function ParentComponent() {const message = useContext(MessageContext);return (<div><ChildComponent message={message} /></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';function ChildComponent(props) {return (<div><p>{props.message}</p></div>);
}export default ChildComponent;

4. 使用 Redux 进行全局状态管理

// store.js
import { createStore } from 'redux';const initialState = {message: '',
};function rootReducer(state = initialState, action) {switch (action.type) {case 'SET_MESSAGE':return { ...state, message: action.payload };default:return state;}
}const store = createStore(rootReducer);export default store;// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ComponentA from './ComponentA';function App() {return (<Provider store={store}><ComponentA /></Provider>);
}export default App;// ComponentA.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';function ComponentA() {const message = useSelector(state => state.message);const dispatch = useDispatch();useEffect(() => {dispatch({ type: 'SET_MESSAGE', payload: 'Hello from ComponentA!' });}, []);return (<div><p>{message}</p></div>);
}export default ComponentA;// ComponentB.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';function ComponentB() {const message = useSelector(state => state.message);return (<div><p>{message}</p></div>);
}export default ComponentB;

5. 使用 Refs 进行组件间通信

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const childRef = useRef(null);const triggerMethod = () => {childRef.current.childMethod();};return (<div><button onClick={triggerMethod}>Trigger Child Method</button><ChildComponent ref={childRef} /></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';class ChildComponent extends React.Component {childMethod = () => {console.log('Called from ParentComponent');};render() {return <div>Child Component</div>;}
}export default ChildComponent;

6. 使用 Event Emitters 进行组件间通信

// EventEmitter.js
import Emitter from 'tiny-emitter/instance';const eventEmitter = new Emitter();export default eventEmitter;// ComponentC.js
import React, { useEffect } from 'react';
import eventEmitter from './EventEmitter';function ComponentC() {useEffect(() => {const handleEvent = (data) => {console.log('Received data:', data);};eventEmitter.on('my-event', handleEvent);return () => {eventEmitter.off('my-event', handleEvent);};}, []);return <div>Component C</div>;
}export default ComponentC;// ComponentD.js
import React, { useEffect } from 'react';
import eventEmitter from './EventEmitter';function ComponentD() {useEffect(() => {eventEmitter.emit('my-event', 'Hello from ComponentD!');}, []);return <div>Component D</div>;
}export default ComponentD;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)

目录 1. 安装Node.js2. 安装vue-cli构建工具3. 使用vue-cli创建项目4. 启动项目5. IDEA启动vue6. 在IDEA编译vue项目7. 用yarn启动vue项目8. npm和yarn命令行命令简单使用8.1 npm8.2 yarn 1. 安装Node.js Node.js基于Google的V8引擎&#xff0c;形成了一个Javascript的运行环境…

CFPRF:一种用于音频时间伪造检测和定位的框架

关键词&#xff1a;音频伪造检测、时间伪造定位、差异特征感知学习 最近&#xff0c;一种新型的音频部分伪造形式对音频取证提出了挑战&#xff0c;这要求采取先进的对策来检测长时间音频中的微妙伪造操作。然而&#xff0c;现有的对策仍然服务于分类目的&#xff0c;未能对部分…

“微软蓝屏”事件暴露了网络安全哪些问题

一、“微软蓝屏”事件暴露了网络安全哪些问题&#xff1f; 1.软件漏洞&#xff1a;微软蓝屏事件是由于Windows操作系统中的一个软件漏洞导致的。软件漏洞可能被黑客利用来执行恶意代码或控制受感染的系统。 2.不及时的安全更新&#xff1a;微软蓝屏事件揭示了一些系统没有及时应…

手机空号过滤批量查询的意义及方法

手机空号过滤批量查询是现代营销和通信管理中常用的技术手段&#xff0c;旨在通过批量处理手机号码&#xff0c;筛选出活跃号码和空号等无效号码&#xff0c;以提高营销效率和减少不必要的通信成本。以下是关于手机空号过滤批量查询的详细解答&#xff1a; 一、手机空号过滤批…

C++客户端Qt开发——Qt窗口(工具栏)

2.工具栏 使用QToolBar表示工具栏对象&#xff0c;一个窗口可以有多个工具栏&#xff0c;也可以没有&#xff0c;工具栏往往也可以手动移动位置 ①设置工具栏 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<…

Django教程(000):初识Django

Django 是一个高级 Python Web 框架,旨在快速开发、简洁、实用。Django 提供了众多内置功能,使得开发者可以专注于编写应用程序的业务逻辑,而不需要过多关注底层细节。以下是 Django 的详细介绍: 1. Django 简介 Django 是一个开放源代码的 Web 框架,由 Python 编写,最…

61.列表重绘

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;60.分析对比模块找出被注入的模块 以 60.分析对比模块找出被注入的模块 它的代码为基础…

secureCRT同时在所有已打开窗口执行命令、mac-os下使用的SecureCRT版本 以及 SecureCRT一段时间不操作没有响应的问题

一、secureCRT命令行工具一次性同时在所有已打开窗口执行命令 公司的服务器比较多&#xff0c;最近因为opcache&#xff0c;上线发布后&#xff0c;需要重启所有的WEB服务器上的php。目前使用的jenkins发布&#xff0c;不过账号安全问题&#xff0c;给jenkins的账号权限受限不能…

Hype 4 Pro for Mac:专业级HTML5动画制作利器

Hype 4 Pro for Mac是一款专为Mac用户设计的专业级HTML5动画制作软件&#xff0c;它集动画制作、交互设计于一身&#xff0c;为用户提供了一种全新的、高效的动画制作体验。 该软件拥有直观易用的界面和强大的功能&#xff0c;支持多种设计元素&#xff0c;如滚动、旋转、缩放…

DVWA的安装和使用

背景介绍 DVWA是Damn Vulnerable Web Application的缩写&#xff0c;是一个用于安全脆弱性检测的开源Web应用。它旨在为安全专业人员提供一个合法的测试环境&#xff0c;帮助他们测试自己的专业技能和工具&#xff0c;同时也帮助web开发者更好地理解web应用安全防范的过程。DV…

css:卡片列表如何自适应布局

css媒体查询&#xff1a;media width(%)flex布局ant-design组件库中有个RowCol&#xff0c;但是有时候需要一排放5个&#xff0c;此时RowCol就不是很适用此时可以采用ant-design组件库Grid组件中useBreakpoint&#xff0c;搭配width(%),代码如下&#xff1a; const screens …

华为高教校园网络解决方案 方案规划

方案规划 高教校园虚拟化网络主要是基于iMaster NCE-Campus部署&#xff0c;按照iMaster NCE-Campus的业务配置模型进行部署规划&#xff0c;具体规划如表4-1所示。 表4-1 园区虚拟化网络新建方案规划 规划项 详细部署思路 管理网络部署方案 高教校园网络的管理…

Oriented RepPoints for Aerial Object Detection

研究对象&#xff1a; 空中目标识别&#xff0c;空中目标探测和识别技术的深入研究是为了将空中打击目标从复杂的背景环境中尽可能地剥离出来&#xff0c;通过知识学习&#xff0c;实现对目标的类型确认&#xff0c;进而完成对目标的威胁评估&#xff0c;为快速打击提供判定和决…

c++中的递归拷贝(Recursive Copy)和递归反转链表(Recursive Reverse Linked List)

前言 hello大家好啊&#xff0c;这里是文宇&#xff0c;不是文字&#xff0c;是文宇哦。 递归拷贝&#xff08;Recursive Copy&#xff09; C中的递归拷贝是一种在拷贝对象时使用递归方法的技术。在C中&#xff0c;为了拷贝一个对象&#xff0c;通常使用拷贝构造函数或拷贝赋…

vue大屏展示组件库datav

主要用于构建大屏数据展示页面&#xff0c;具有多种类型组件可供使用。详情参考 datav官网 一、安装 npm 安装 npm install jiaminghi/data-viewyarn安装 yarn add jiaminghi/data-view二、使用 在main.js中注册为全局组件 import dataV from jiaminghi/data-view Vue.us…

GD32 MCU电源复位和系统复位有什么区别

GD32 MCU的复位分为电源复位和系统复位&#xff0c;电源复位又称为冷复位&#xff0c;相较于系统复位&#xff0c;上电复位更彻底&#xff0c;下面为大家详细介绍上电复位和系统复位的实现以及区别。 电源复位包括上电/掉电复位或者从standby模式唤醒产生的复位&#xff0c;电…

【进阶篇-Day12:JAVA中stream流、File类的介绍】

目录 1、stream流1.1 stream流的作用1.2 stream流的思想1.3 获取stream流对象1.4 stream流中间操作方法1.5 stream流终结操作方法1.6 stream收集操作1.7 stream的综合案例 2、File类2.1 File类创建文件对象2.2 File类的常用方法2.3 File类的创建和删除方法2.4 File类的遍历方法…

埃文科技受邀出席2024年河南省工业领域网络和数据安全政策宣贯会

2024年7月18日&#xff0c;由河南省工业和信息化厅主办&#xff0c;河南省工业信息安全产业发展联盟、河南省信息安全产业协会承办的2024年河南省工业领域网络和数据安全政策宣贯会在郑州召开&#xff0c;活动旨在提升河南省工业领域网络和数据安全保护能力&#xff0c;助力企业…

Fetch请求的取消

在实际开发中&#xff0c;我们常常会遇到根据输入框输入的内容&#xff0c;实时去请求接口并将拿到的数据渲染到页面上&#xff0c;但是由于接口响应时间不可控&#xff0c;简单来说就是请求的顺序和响应的顺序不一致&#xff0c;就会导致你可能输入了12&#xff0c;但实际返回…

PMOS、NMOS 驱动电路和使用方法

下图就是 PMOS 和 NMOS 的简单使用方法。D2 是指示灯&#xff0c;NMOS 的 G 连接单片机 IO&#xff0c;PMOS 的 D 连接 24V 继电器&#xff0c;PMOS 的体二极管作为继电器的反向电动势的吸收二极管 PMOS 和 NMOS 不一样&#xff0c;在远超单片机电压下控制 PMOS 必须依靠一个 N…