React组件间通信：从子组件向父组件传递数据实践

程序猿 • 2025年12月20日 21:34:33 • 好文分享 • 阅读 0

本教程详细讲解如何在React中实现子组件向父组件传递数据。通过在父组件定义回调函数并作为props传递给子组件，子组件在事件触发时调用该回调，将数据回传。父组件使用状态管理接收数据，并可利用`useEffect`响应数据变化，实现动态数据请求，避免直接调用组件函数。

在React应用开发中，组件之间的数据流通常是单向的，即数据从父组件流向子组件（通过props）。然而，在许多场景下，我们需要子组件将数据或事件通知给父组件。例如，一个表单输入组件（子组件）在用户提交数据后，需要将输入值传递给其父组件进行处理。本文将以一个具体的示例，详细阐述如何实现这种“子组件向父组件传递数据”的通信模式。

理解React数据流与组件通信

React的核心思想是单向数据流。父组件通过props将数据传递给子组件。当子组件需要与父组件通信时，它不能直接修改父组件的状态。正确的做法是，父组件传递一个回调函数给子组件作为prop，子组件在需要通信时调用这个回调函数，并将数据作为参数传递给它。这样，父组件就能在其回调函数中接收到子组件传来的数据，并更新自己的状态。

示例场景：从输入框组件获取数据到应用主组件

假设我们有一个InputField组件用于用户输入地址，并有一个App组件作为主应用，需要在InputField提交数据后，使用该地址进行API请求。

1. 修改子组件：InputField.js

首先，我们需要修改InputField组件，使其能够接收一个回调函数作为prop。当用户提交表单时，InputField会调用这个回调函数，并将输入值传递出去。

// InputField.jsimport React from 'react';export default function InputField({ onSubmit }) { // 接收一个名为 onSubmit 的 prop  function handleSubmit(e) {    e.preventDefault(); // 阻止浏览器默认的表单提交行为    const form = e.target;    const inputVal = form.myInput.value; // 获取输入框的值    console.log("子组件获取到的输入值:", inputVal);    // 调用父组件传递进来的回调函数，并将输入值作为参数传递    if (onSubmit && typeof onSubmit === 'function') {      onSubmit(inputVal);     }  }  return (                      );}

关键点：

InputField组件现在接受一个名为onSubmit的prop。在handleSubmit函数中，获取到inputVal后，我们调用了onSubmit(inputVal)。这意味着当表单提交时，InputField会将inputVal“回传”给父组件。添加了类型检查if (onSubmit && typeof onSubmit === ‘function’)以增强健壮性。

2. 修改父组件：App.js

接下来，我们需要在App组件中定义一个状态来存储从InputField接收到的数据，并创建一个回调函数传递给InputField。

// App.jsimport './App.css';import AccountNumber from "./components/AccountNumber";import InputField from "./components/InputField";import { useEffect, useState } from "react";function App() {  // 状态用于存储从 InputField 接收到的地址值  const [searchValue, setSearchValue] = useState(null);   // 状态用于存储API返回的tokens数据  const [tokens, setTokens] = useState([]);  // 状态用于管理加载状态  const [loading, setLoading] = useState(false);  // 定义一个回调函数，用于接收 InputField 传递过来的值  const handleSearchSubmit = (val) => {    setSearchValue(val); // 更新 searchValue 状态  };  // useEffect 钩子用于在 searchValue 变化时触发数据请求  useEffect(() => {    // 只有当 searchValue 不为 null 且不为空字符串时才进行数据请求    if (searchValue) {       setLoading(true);      fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`)        .then(response => response.json())        .then(json => setTokens(json))        .finally(() => {          setLoading(false);        });      console.log("App组件发起请求，searchValue:", searchValue);    }    // 依赖数组包含 searchValue，确保当 searchValue 改变时 useEffect 重新运行  }, [searchValue]);   // ... (其他辅助函数，如 round, numberWithSpaces 保持不变)  return (                                        Total number of accounts
                
            
                            {/* 将 handleSearchSubmit 函数作为 onSubmit prop 传递给 InputField */}                             
            {/* 可以显示当前 searchValue 进行调试 */}            当前搜索地址: {searchValue || '未输入'}
        
                                  {loading ? (                Loading...
              ) : (                                  Tokens
                  
                    {tokens.map(token => (                                          ))}                                                            Name                       Price                       Hold                     
                    
                                                @@##@@                           {token.name}
                                                                                                                                                    Content at Scale                            SEO长内容自动化创作平台
                                                                                            154                            
                        
                                                    查看详情                                                                        
                                                                  ${round(token.price, 10000000)}
                                                    {round(token.balance / Math.pow(10, token.decimals), 10000000)}
                           ${round(token.valueUsd, 10000000)}
                                              
                        
         );}// 辅助函数（保持不变）function round(nr, ten) {     return Math.round(nr * ten) / ten;}function numberWithSpaces(nr) {     return nr.toString().replace(/B(?=(d{3})+(?!d))/g, " ");}export default App;

Name	Price	Hold
@@##@@ {token.name} Content at Scale SEO长内容自动化创作平台 154 查看详情	${round(token.price, 10000000)}	{round(token.balance / Math.pow(10, token.decimals), 10000000)} ${round(token.valueUsd, 10000000)}

关键点：

useState(null): App组件引入了一个新的状态变量searchValue，初始值为null，用于存储从InputField获取的地址。handleSearchSubmit回调函数: 定义了一个名为handleSearchSubmit的函数。当InputField调用它时，会将传入的val更新到searchValue状态。: 在渲染InputField时，将handleSearchSubmit函数作为onSubmit prop传递给它。这是实现子组件向父组件通信的关键。useEffect依赖项: useEffect现在依赖于searchValue。这意味着每当searchValue状态更新时（即用户提交了新的地址），useEffect中的数据请求逻辑就会重新执行，使用新的地址发起API请求。条件请求: 在useEffect内部添加了if (searchValue)的判断，确保只有当searchValue有实际值时才发起API请求，避免在组件首次渲染时（searchValue为null）立即请求。组件渲染方式: 重要提示：在JSX中渲染React组件时，应使用标签语法，而不是像调用普通函数那样InputField()。InputField()会直接执行组件函数并返回JSX元素，而则会触发React的组件生命周期和优化机制。原始问题代码中的{InputField()}是一个常见的误区，应修正为。

总结与注意事项

通过以上步骤，我们成功地实现了React中子组件向父组件传递数据的功能。这种模式是React应用中组件间通信的基石，被称为“提升状态”（Lifting State Up）。

核心概念回顾：

单向数据流: 数据从父组件流向子组件。回调函数: 父组件定义一个回调函数，并通过props传递给子组件。子组件调用回调: 子组件在需要传递数据时，调用父组件传递过来的回调函数，并将数据作为参数传入。父组件更新状态: 父组件在回调函数中接收到数据后，更新自己的状态，从而触发重新渲染。useEffect与依赖项: 当父组件的状态（如searchValue）更新时，可以使用useEffect来响应这些变化，执行副作用（如API请求）。useEffect的依赖项数组确保了其在正确的时间点执行。

注意事项：

避免直接调用组件函数: 始终使用JSX标签语法来渲染React组件，而不是Component()。状态管理: 在父组件中管理从子组件接收到的数据，是React数据流的推荐实践。清晰的命名: 为回调函数和props使用清晰、描述性的名称，提高代码可读性。例如，onSubmit明确表示这是一个提交事件的回调。

掌握这种通信模式对于构建复杂的、交互性强的React应用至关重要。

以上就是React组件间通信：从子组件向父组件传递数据实践的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529951.html

app css js json react 代码可读性回调函数应用开发浏览器组件渲染表单提交

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

375.7K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

解决浏览器中NPM包的ES模块导入错误：教程与最佳实践

上一篇 2025年12月20日 21:34:30

使用MutationObserver监听DOM变化并动态控制元素可见性

下一篇 2025年12月20日 21:34:42

好文分享

解决浏览器中NPM包的ES模块导入错误：教程与最佳实践

本教程旨在解决在浏览器中使用es模块import语句导入npm包时遇到的uncaught typeerror: failed to resolve module specifier错误。我们将深入探讨浏览器模块解析机制与node.js的区别，并提供两种主要解决方案：使用模块打包器（如parcel）进…

程序猿
2025年12月20日
0000
好文分享

在Ionic Capacitor应用中正确打开本地PDF文件教程

本教程详细指导如何在ionic capacitor应用中安全有效地打开本地pdf文件。针对`@ionic-native/file-opener`在capacitor环境中存在的cordova兼容性问题，我们推荐使用专为capacitor设计的插件，并重点讲解如何将应用资产目录（`assets`）中的…

程序猿
2025年12月20日
0000
好文分享

使用 JavaScript 将变量值显示在标签中

本文旨在解决 JavaScript 中将变量值动态显示在 HTML 标签中的问题。我们将通过示例代码，详细讲解如何正确地获取和更新变量，并将其值插入到 HTML 元素中。同时，我们也会讨论一些代码规范和最佳实践，例如避免使用内联事件处理，以及如何使用 `addEventListener()` 来绑定…

程序猿
2025年12月20日
0000
好文分享

k6 教程：解决 open 函数误导入导致的 TypeError 错误

本文将深入探讨在 k6 性能测试脚本中，因错误导入 `open` 函数而引发的 `typeerror: value is not an object: undefined` 错误。我们将详细解释 `open` 函数的正确使用方式及其在 k6 生命周期中的位置，并提供一套清晰的解决方案，以确保您的脚本…

程序猿
2025年12月20日
0000
好文分享

React自定义Hook：抽象重复的加载与错误状态管理逻辑

在react应用开发中，管理异步操作的加载状态、错误信息及其定时清除是常见的重复模式。本文将深入探讨如何利用react的自定义hook机制，将这些重复的逻辑模式抽象成可复用的模块，从而显著提升代码的可读性、可维护性与复用性，避免冗余代码，使组件逻辑更加清晰。引言：重复逻辑的困扰在现代Web应用中…

程序猿
2025年12月20日
0000
好文分享

使用 Capacitor 在 Ionic 应用中打开 PDF 文件

本文详细介绍了在 Ionic Capacitor 应用中正确打开本地 PDF 文件的方法。针对 `@ionic-native` 插件在 Capacitor 环境下可能遇到的兼容性问题，我们推荐使用 Capacitor 原生插件，并提供从应用资产读取 PDF、写入设备文件系统，最终通过文件打开器插件进…

程序猿
2025年12月20日
0000
好文分享

解决Angular Material Table数据更新问题

当Angular Material Table的数据源发生变化时，表格没有及时更新，这通常是由于数据源的变更没有被正确地通知给表格。本文将详细介绍如何解决这个问题，确保表格能够正确反映数据的变化。核心在于使用`BehaviorSubject`正确地更新数据流，并触发表格的重新渲染。理解问题 Ang…

程序猿
2025年12月20日
0000
好文分享

JavaScript深度嵌套对象数组的层级保留过滤：从复杂结构到递归解决方案

本文探讨了在javascript中过滤深度嵌套对象数组时，如何有效保留匹配项的完整父级层级。针对传统深层过滤工具可能无法满足此需求的挑战，我们提出了一种解决方案：通过将复杂的数据结构标准化为统一的“children”键，并结合自定义递归过滤函数，实现精确筛选并维持数据层级，确保输出结果结构完整且仅包…

程序猿
2025年12月20日
0000
好文分享

使用 Axios 拦截器实现 Access Token 自动刷新机制

本文详细阐述了如何利用 %ignore_a_1% 拦截器实现 access token 的自动刷新机制。针对 access token 过期导致的 403 未授权错误，通过配置响应拦截器，在检测到特定错误码时，自动触发令牌刷新流程，更新授权头部并重试原请求，从而提升用户体验，避免频繁重新登录。理解…

程序猿
2025年12月20日
0000
好文分享

Google Drive重复文件智能清理：App Script实现保留最旧版本

本文详细介绍了如何利用google apps script自动化清理google drive文件夹中的重复文件。通过修改app script代码，脚本能够识别文件名和大小均相同的重复文件，并智能地保留其中创建日期最早的版本，而将其他较新的重复文件移至回收站，从而有效管理存储空间并保持文件历史的完整性…

程序猿
2025年12月20日
0000
好文分享

使用JavaScript通过复选框增减数值的教程

本教程旨在指导开发者如何使用javascript正确地通过复选框（checkbox）动态增减页面上的数值。我们将分析常见的错误实现，并提供一种高效且逻辑清晰的解决方案，利用事件监听器和`this`上下文，确保在用户勾选或取消勾选时，数值能够准确更新，避免重复计算和逻辑错误。背景与常见问题在Web…

程序猿
2025年12月20日
0000
好文分享

JavaScript OAuth认证流程

使用OAuth 2.0 + PKCE实现前端安全授权，首先生成code verifier和challenge，再重定向至第三方登录页，用户授权后回调获取code，最后用code和verifier换取access token并调用API，建议由后端完成token交换以提升安全性。 JavaScript…

程序猿
2025年12月20日
0000
好文分享

JavaScript 类中异步等待特定按键事件的实现策略

本文探讨了如何在 JavaScript 类中实现异步等待特定按键事件的功能，以控制程序的执行流程。通过深入分析基于 Promise 和 `async/await` 的解决方案，以及直接使用事件监听器的替代方法，文章详细阐述了两种策略的实现细节、适用场景及关键注意事项，特别是事件监听器的正确管理和 `…

程序猿
2025年12月20日
0000
好文分享

JavaScript RESTful服务设计

答案：基于JavaScript的RESTful服务使用Express框架，通过HTTP方法操作资源，URL路径如/users表示用户资源，支持GET、POST、PUT、DELETE方法，返回JSON格式响应，包含200、201、404等状态码，实现资源的增删改查。设计一个基于 JavaScript…

程序猿
2025年12月20日
0000
好文分享

将音频文件变量关联到HTML元素并实现点击播放功能

本教程将指导开发者如何将javascript中的音频文件变量与html元素进行有效关联，实现用户点击html元素后播放对应音频的功能。文章将详细介绍使用对象映射管理音频文件、通过事件监听器捕捉用户交互，以及编写高效的javascript函数来动态播放音频的专业方法，帮助您构建交互式网页应用。在现代…

程序猿
2025年12月20日
0000
好文分享

JavaScript设计模式实战应用

单例模式确保全局唯一实例，适用于配置管理；观察者模式解耦事件发布与订阅，支撑响应式机制；工厂模式统一复杂对象创建，提升可维护性；装饰器模式动态扩展功能，避免修改原代码。这些模式从实例控制、事件通信、对象生成到行为增强提供系统化解决方案，显著提升代码结构与可扩展性。 JavaScript设计模式不是花…

程序猿
2025年12月20日
0000
好文分享

VBScript安全下载与执行：规避杀毒软件检测的实践

本文探讨了如何优化vbscript代码，通过利用系统内置的`curl`命令进行文件下载，并直接执行下载的程序，从而有效规避杀毒软件对传统下载和快捷方式创建方式的误报。这种方法简化了代码结构，提高了脚本的隐蔽性和执行效率，适用于需要安全分发和运行合法软件的场景。在自动化脚本和系统管理任务中，VBSc…

程序猿
2025年12月20日
0000
好文分享

在Visual Studio中高效搜索整个项目中的特定字符串

本文详细指导如何在visual studio中利用“在文件中查找”功能（快捷键`ctrl+shift_f`）快速搜索整个解决方案或项目中的特定字符串。该功能对于变量标准化、代码重构或定位特定文本等任务至关重要，能显著提升开发效率，避免手动逐页查找的繁琐，确保代码库的一致性和准确性。在大型软件项目中…

程序猿
2025年12月20日
0000
好文分享

JavaScript字符串处理：高效替换空格为加号并移除首尾空白字符

本文详细介绍了在javascript中如何准确地将字符串中的所有空格（包括连续空格）替换为加号`+`，同时确保字符串首尾的空白字符被移除。通过结合使用`string.prototype.trim()`方法和正则表达式`string.prototype.replace()`，可以实现这一精确的字符串转…

程序猿
2025年12月20日
0000
好文分享

解决 react-redux 上下文未找到错误的实用指南

本文深入探讨了在 `react-redux` 应用中遇到的“`could not find react-redux context value`”错误，该错误通常发生在组件尝试在 `provider` 组件 *内部* 访问 redux 上下文时。文章提供了多种解决方案，包括将逻辑下沉到子组件、使用自…

程序猿
2025年12月20日
0000