React组件间通信的几种方式

news/2024/12/23 8:03:13/

一、Props向下传递(Top-Down Propagation)

父组件通过props将其状态或数据传递给子组件。

父组件:

javascript">class ParentComponent extends React.Component {state = { message: 'Hello World' };render() {return <ChildComponent message={this.state.message} />;}
}

子组件;

javascript">class ChildComponent extends React.Component {render() {return <div>{this.props.message}</div>;}
}

二、Callback函数

父组件向子组件传递一个回调函数,子组件在需要时调用这个函数与父组件通信。

父组件:

javascript">class ParentComponent extends React.Component {handleData = (data) => {console.log('Received from child:', data);};render() {return <ChildComponent sendData={this.handleData} />;}
}

子组件:

javascript">class ChildComponent extends React.Component {someEvent = () => {this.props.sendData('Data from child');};render() {return <button onClick={this.someEvent}>Send Data to Parent</button>;}
}

三、Lifting State Up(状态提升)

当多个组件需要共享状态时,可以将状态提升到它们共同的父组件中。

父组件:

javascript">class ParentComponent extends React.Component {state = { sharedData: 'Shared Data' };render() {return (<><ChildA sharedData={this.state.sharedData} /><ChildB sharedData={this.state.sharedData} /></>);}
}

子组件A和B:

javascript">class ChildComponent extends React.Component {render() {return <div>{this.props.sharedData}</div>;}
}

四、 Context(上下文)

React的Context API允许你共享值给组件树中的所有组件,而不必显式地通过每个层级传递props

创建Context:

javascript">const MyContext = React.createContext(defaultValue);

提供Context值:

javascript"><MyContext.Provider value={/* 一些值 */}>{/* 组件树 */}
</MyContext.Provider>

在子组件中使用Context:

javascript">class ChildComponent extends React.Component {render() {return (<MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>);}
}

或者使用useContext钩子:

javascript">import { useContext } from 'react';const ChildComponent = () => {const value = useContext(MyContext);return <div>{value}</div>;
};

五、Custom Hooks(自定义钩子)

自定义钩子允许你提取组件逻辑,使其可以在多个组件间重用。

自定义钩子:

javascript">function useCustomHook() {const [state, setState] = useState(initialState);// 钩子的逻辑...return state;
}

在组件中使用自定义钩子:

javascript">const Component = () => {const state = useCustomHook();return <div>{state}</div>;
};

六、 Higher-Order Components(高阶组件)

高阶组件是React中的一个高级技术,它通过包装一个组件来扩展其功能。

高阶组件:

javascript">function enhanceComponent(WrappedComponent) {return class extends React.Component {// 扩展逻辑...render() {return <WrappedComponent {...this.props} />;}};
}
//使用高阶组件:const EnhancedComponent = enhanceComponent(OriginalComponent);


http://www.ppmy.cn/news/1475805.html

相关文章

SpringBootWeb 篇-入门了解 Swagger 的具体使用

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Swagger 介绍 1.1 Swagger 和 Yapi 的使用场景 2.0 Swagger 的使用方式 2.1 导入 knife4j 的 maven 坐标 2.2 在配置类中加入 knife4j 相关配置 2.3 设置静态资源…

WPF实现一个带旋转动画的菜单栏

WPF实现一个带旋转动画的菜单栏 一、创建WPF项目及文件1、创建项目2、创建文件夹及文件3、添加引用 二、代码实现2.ControlAttachProperty类 一、创建WPF项目及文件 1、创建项目 打开VS2022,创建一个WPF项目&#xff0c;如下所示 2、创建文件夹及文件 创建资源文件夹&…

小程序创建与项目初始化(构建 npm + 集成 Sass)

一、打开微信开发者工具 确认 左侧导航栏是否选中的 小程序点击 【】创建小程序 二、创建小程序 三、初始化 清空 app.wxss、app.js 去掉 rendererOptions 和 componentFramework 不需要最新的搜索引擎 留下以下文件 四、自定义构建 npm 集成 Sass 首先 先把小程序源…

JMeter进行HTTP接口测试的技术要点

参数化 用户定义的变量 用的时候 ${名字} 用户参数 在参数列表中传递 并且也是${} csv数据文件设置 false 不忽略首行 要首行 从第一行读取 true 忽略首行 从第二行开始 请求时的参数设置&#xff1a; 这里的名称是看其接口需要的请求参数的名称 这里的变量名称就是为csv里面…

QLoRa使用教程

一、定义 定义案例1 二、实现 定义 QLoRa: 量化LoRa. 网址&#xff1a;https://huggingface.co/docs/peft/main/en/developer_guides/quantization案例1 1. 4bit 量化LoRa import torch from transformers import BitsAndBytesConfigconfig BitsAndBytesConfig(load_in_4b…

各地户外分散视频监控点位,如何实现远程集中实时监看?

公司业务涉及视频监控项目承包搭建&#xff0c;此前某个项目需求是为某林业公司提供视频监控解决方案&#xff0c;需要实现各地视频摄像头的集中实时监看&#xff0c;以防止国家储备林的盗砍、盗伐行为。 公司原计划采用运营商专线连接各个视频监控点位&#xff0c;实现远程视…

计算机图形学入门28:相机、透镜和光场

1.前言 相机(Cameras)、透镜(Lenses)和光场(Light Fields)都是图形学中重要的组成部分。在之前的学习中&#xff0c;都是默认它们的存在&#xff0c;所以现在也需要单独拿出来学习下。 2.成像方法 计算机图形学有两种成像方法&#xff0c;即合成(Synthesis)和捕捉(Capture)。前…

HBase 在统一内容平台业务的优化实践

作者&#xff1a;来自 vivo 互联网服务器团队-Leng Jianyu、Huang Haitao HBase是一款开源高可靠性、扩展性、高性能和灵活性的分布式非关系型数据库&#xff0c;本文围绕数据库选型以及使用HBase的痛点展开&#xff0c;从四个方面对HBase的使用进行优化&#xff0c;取得了一些…