React 中组件通信的几种主要方式

一、父传子:

1. 传递多个属性

父组件可以通过 props 传递多个属性给子组件。

示例
// 子组件
function Son(props) {return (<div>This is Son, {props.name} - Age: {props.age}</div>);    
}// 父组件
function App() {const name = 'This is App Name';const age = 10;return (<div><Son name={name} age={age} /></div>);
}

2. 传递函数作为 props

父组件可以将函数作为 props 传递给子组件,子组件可以调用这个函数来与父组件进行交互。

示例
// 子组件
function Son(props) {const handleClick = () => {props.onButtonClick('Button clicked!');};return (<div>This is Son. <button onClick={handleClick}>Click Me</button></div>);    
}// 父组件
function App() {const handleSonClick = (message) => {console.log(message);};return (<div><Son onButtonClick={handleSonClick} /></div>);
}

3. 使用默认值

为子组件的 props 设置默认值,使用 defaultProps

示例
// 子组件
function Son(props) {return <div>This is Son, {props.name}</div>;    
}Son.defaultProps = {name: 'Default Name'
};// 父组件
function App() {return (<div><Son /> {/* 不传递 name 属性 */}</div>);
}

4. PropTypes 验证

使用 prop-types 库可以对传递给子组件的 props 进行类型检查。

示例
import PropTypes from 'prop-types';// 子组件
function Son(props) {return <div>This is Son, {props.name}</div>;    
}Son.propTypes = {name: PropTypes.string.isRequired, // name 是必需的字符串
};// 父组件
function App() {return (<div><Son name="This is App Name" /></div>);
}

5. 传递对象和数组

父组件可以传递对象或数组作为 props,子组件可以直接使用。

示例:

子组件向父组件传递数据的主要方式是通过回调函数。父组件将一个函数作为 props 传递给子组件,子组件在需要时调用这个函数,并将数据作为参数传递给父组件。

// 子组件
function Son(props) {return (<div>This is Son, {props.data.name}, Age: {props.data.age}</div>);    
}// 父组件
function App() {const user = { name: 'John', age: 25 };return (<div><Son data={user} /></div>);
}

总结:

  • 多属性传递: 父组件可以传递多个属性给子组件。
  • 函数作为 props: 父组件可以将函数传递给子组件,子组件可以调用这个函数与父组件进行交互。
  • 默认值和类型检查: 可以通过 defaultPropsPropTypes 来确保 props 的完整性和正确性。
  • 传递对象和数组: 可以将复杂的数据结构(如对象和数组)作为 props 传递。

二、子传父:

子组件向父组件传递数据的主要方式是通过回调函数。父组件将一个函数作为 props 传递给子组件,子组件在需要时调用这个函数,并将数据作为参数传递给父组件。 

1.基本用法示例:

父组件
import React from 'react';
import Son from './Son';function App() {const handleMessage = (msg) => {console.log("Received from Son:", msg);};return (<div><h1>Parent Component</h1><Son onSendMessage={handleMessage} /></div>);
}export default App;
子组件
import React from 'react';function Son(props) {const sendMessage = () => {props.onSendMessage("Hello from Son!");};return (<div><h2>Child Component</h2><button onClick={sendMessage}>Send Message to Parent</button></div>);
}export default Son;

2. 传递事件数据

子组件可以传递事件数据给父组件,通常用于处理用户输入或按钮点击。

示例
// 父组件
function App() {const handleInputChange = (inputValue) => {console.log("Input from Son:", inputValue);};return (<div><h1>Parent Component</h1><Son onInputChange={handleInputChange} /></div>);
}// 子组件
function Son(props) {const handleChange = (event) => {props.onInputChange(event.target.value);};return (<div><h2>Child Component</h2><input type="text" onChange={handleChange} placeholder="Type something..." /></div>);
}

3. 传递多个参数

子组件也可以通过回调函数传递多个参数给父组件。

示例
// 父组件
function App() {const handleData = (name, age) => {console.log("Received from Son:", name, age);};return (<div><h1>Parent Component</h1><Son onSendData={handleData} /></div>);
}// 子组件
function Son(props) {const sendData = () => {props.onSendData("John", 30);};return (<div><h2>Child Component</h2><button onClick={sendData}>Send Data to Parent</button></div>);
}

总结:

  • 回调函数: 子组件通过调用父组件传递的回调函数来传递数据。
  • 事件数据传递: 子组件可以通过回调函数向父组件传递事件数据,如用户输入。
  • 多个参数: 子组件可以通过回调函数传递多个参数给父组件。

三、使用Context机制跨层级组件通信:

App组件——A组件——B组件

1.创建上下文对象:在所有组件外部创建一个上下文对象

import React, { createContext } from 'react';// 创建上下文对象
cosnt MsgContext = createContext()

2.顶层组件提供数据:在顶层组件通过Provider组件提供数据 

// App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ComponentA from './ComponentA';const App = () => {const [data, setValue] = useState("Hello from Context!");return (<MyContext.Provider value={{ data, setData }}><h1>Top Level Component</h1><A /></MyContext.Provider>);
};export default App;

3.中间组件A组件(可选)

// ComponentA.js
import React from 'react';
import ComponentB from './ComponentB';const ComponentA = () => {return (<div><h2>Component A</h2><B /></div>);
};export default ComponentA;

4.底层组件消费数据: 在底层组件中使用 useContext 钩子获取数据。 

// ComponentB.js
import React, { useContext } from 'react';
import MyContext from './MyContext';const ComponentB = () => {const { value, setValue } = useContext(MyContext); // 获取上下文const changeValue = () => {setValue('update from B'); // 更新上下文值};return (<div><h3>Component B</h3><p>Data from Context: {data}</p><button onClick={changeValue}>更新值</button></div>);
};export default ComponentB;

总结:

  • 创建 Context: 使用 createContext 创建上下文。
  • 提供 Context: 使用 Context.Provider 在顶层组件中提供数据。
  • 使用 Context: 在子组件中使用 useContext 钩子访问上下文。
  • 更新 Context: 子组件通过调用更新函数来修改上下文的值。

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

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

相关文章

精华帖分享|如何全方位无死角保护你的交易所账号

本文来源于量化小论坛策略分享会板块精华帖&#xff0c;作者为菊座&#xff0c;发布于2024年3月4日。 以下为精华帖正文&#xff1a; 01 背景 起因是这两周保4赚麻了&#xff0c;看到中性群里大佬们的曲线&#xff0c;大家都想加大仓位&#xff0c;于是我在群里提醒了下大家资…

【STM32】SD卡

(一)常用卡的认识 在学习这个内容之前&#xff0c;作为生活小白的我对于SD卡、TF卡、SIM卡毫无了解&#xff0c;晕头转向。 SD卡&#xff1a;Secure Digital Card的英文缩写&#xff0c;直译就是“安全数字卡”。一般用于大一些的电子设备比如&#xff1a;电脑、数码相机、AV…

11月第一篇新作,十一月对我好一点:C++之继承(2)

C之继承&#xff08;2&#xff09; 虚继承 很多⼈说C语法复杂&#xff0c;其实多继承就是⼀个体现。有了多继承&#xff0c;就存在菱形继承&#xff0c;有了菱形继承就有 菱形虚拟继承&#xff0c;底层实现就很复杂&#xff0c;性能也会有⼀些损失&#xff0c;所以最好不要设计…

tiktok批量添加达人怎么弄

在 TikTok 上批量添加达人可以借助一些工具或方法&#xff0c;以下是一些常见的途径&#xff1a; 点我达秘免费体验地址注册 使用达人邀约工具&#xff1a; 功能特点&#xff1a;这类工具专为 TikTok 跨境小店和本土小店提供服务&#xff0c;可以实现多国家、多店铺同时私信和…

重塑重工起重行业未来:网关与云平台携手共创价值新篇章

在重工起重这一传统而关键的工业领域中&#xff0c;技术的每一次革新都意味着生产效率与安全标准的飞跃。随着物联网、大数据、云计算等先进技术的不断渗透&#xff0c;重工起重行业正迎来一场前所未有的智能化变革。其中&#xff0c;网关与云平台的深度融合&#xff0c;正成为…

NPOI 操作详解(操作Excel)

目录 1. 安装 NPOI 2. 使用 NPOI 创建新 Excel 文件 3. 设置列宽和行高 1. 设置列宽 2. 设置行高 3. 同时设置列宽和行高 4. 设置统一的行高 5. 设置统一的列宽 6. 应用统一的行高和列宽 4. 合并单元格 5. 设置单元格样式&#xff08;字体、边框、背景色等&#xf…

CMS getshell

进入前台 漏洞为前台任意用户密码修改和前台用户文件上传然后getshell 1. 弱口令进入前台用户admin123/admin123 2. 进入会员用户后点击内容中心 点击发布文章 存在文件上传&#xff0c;发现后缀和MIME类型都是白名单 但是在原文件的基础上继续添加随意后缀&#xff0c;发现成功…

教你用python实现自动化文本识别

目录 步骤1&#xff1a;安装依赖 安装Tesseract 安装pytesseract和Pillow&#xff08;用于图像处理&#xff09; 扩展功能 实现自动化文本识别&#xff08;Optical Character Recognition, OCR&#xff09;通常使用Python的OCR库&#xff0c;例如Tesseract。Tesseract是一个…

逻辑磁盘管理 附实验:逻辑卷的组成与划分

分区类型&#xff1a; 1、系统引导分区 就是存放系统的引导文件和Linux的内核文件 2、swap分区 交换分区&#xff0c;系统的物理内存不足时&#xff0c;从一些长时间未运行的程序当中释放一部分内存释放出来的保存到swap分区&#xff0c;这些未运行的程序一旦运行还要从swap空…

讲讲 kafka 维护消费状态跟踪的方法?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲 kafka 维护消费状态跟踪的方法&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲讲 kafka 维护消费状态跟踪的方法&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#x…

Flutter-Engine 的定制实践:Text 绘制流程浅析及自定义underline的间距

前言 最近工作中处理的文本相关的内容较多&#xff0c;不论是刁钻的需求还是复杂的问题&#xff0c;最终都会引向一点“Flutter中的文本是如何绘制的&#xff1f;”。 这里我将以“调整下划线与文字的间距”为切入点并结合自定义Engine&#xff0c;记录一下我的个人分析和实践…

[A-14]ARMv8/ARMv9-Memory-内存模型的类型(Device Normal)

ver0.1 [看前序文章有惊喜。] 前言 前面花了很大的精力把ARM构建的VMSA中的几个核心的议题给大家做了介绍,相信大家已经能够理解并掌握ARM的内存子系统的工作原理大致框架。接下来我们会规划一些文章,对ARM内存子系统的一些细节做一下介绍,使ARM的内存子系统更加的丰满。本…

可编辑31页PPT | 智慧业务中台规划建设与应用总体方案

荐言分享&#xff1a;随着数字化转型的深入&#xff0c;企业面临着前所未有的挑战与机遇。为了高效整合内外部资源&#xff0c;快速响应市场变化&#xff0c;提升业务创新能力&#xff0c;智慧业务中台应运而生。智慧业务中台作为企业数字化转型的核心基础设施&#xff0c;旨在…

深入理解Docker,从入门到精通-Part1(基础使用)

一、Docker基本概念 Docker架构 基本组件的介绍 Docker Client 是用户界面&#xff0c;它支持用户与Docker Daemon之间通信 Docker Daemon Docker最核心的后台进程&#xff0c;运行于主机上&#xff0c;处理服务请求 Docker registry是中央registry&#xff0c;支持拥有公有与…

在macOS的多任务处理环境中,如何平衡应用的性能与用户体验?这是否是一个复杂的优化问题?如何优化用户体验|多任务处理|用户体验|应用设计

目录 一 多任务处理与应用性能 1. macOS中的多任务处理机制 2. 性能优化的基本策略 二 用户体验的关键要素 1. 响应速度 2. 界面友好性 3. 功能的直观性 三 平衡性能与用户体验的策略 1. 资源管理 2. 优化数据加载 3. 使用合适的线程模型 4. 实时监测和调整 四 使…

lvm逻辑卷管理

分区类型&#xff1a; 主分区扩展分区逻辑分区系统引导分区&#xff1a;存放系统的引导文件和linux的内核文件swap分区&#xff1a;交换分区&#xff0c;系统的物理内存不足时&#xff0c;从一些长时间未运行的程序当中释放一部分内存&#xff0c;释放出来的内存保存到swap分区…

openai api 文件分析/联网/画图代码示例

目的 使用https://4o.zhangsan.shop的API进行文件分析等功能。 完整代码 # pip install openai0.28 # 注意下方代码必须使用该版本 import openaidef query_gpt4(question):openai.api_key "sk-aQR1wbTsLpySgJDq3fFb026c225a44C8924750C1B67bCeD5"openai.api_ba…

Android编译环境构建(二)(可用于物理机、虚拟机、容器化Jenkins环境)

文章目录 需求环境要求文件下载Gradle Version:7.5cmdline-tools至此普通物理环境的Android编译环境已部署完毕 部署maven(可选)Jenkins配置Android构建环境 说明&#xff1a; 物理环境&#xff1a;物理机、虚拟机等 容器化环境&#xff1a;docker等 需求 Gradle Version:7.5 …

WPF+MVVM案例实战(十)- 水波纹按钮实现与控件封装

文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现2、使用封装的按钮控件1.主界面引用2.按钮属性设置3 总结1、运行效果 1、封装用户控件 1、创建文件 打开 Wpf_Examples 项目,在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ,修改 Us…

Spring Boot解决 406 错误之返回对象缺少Getter/Setter方法引发的问题

目录 前言1. 问题背景2. 问题分析2.1 检查返回对象 3. 解决方案3.1 确保Controller返回Result类型3.2 测试接口响应 4. 原理探讨5. 常见问题排查与优化建议结语 前言 在Spring Boot开发中&#xff0c;接口请求返回数据是系统交互的重要环节&#xff0c;尤其在开发RESTful风格的…