Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
React组件通信：从子组件向父组件传递数据_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

react组件通信：从子组件向父组件传递数据

本教程详细讲解了在React中如何实现子组件向父组件传递数据。通过利用Props传递回调函数，父组件可以接收并处理子组件触发的事件和数据，同时结合`useState`管理状态和`useEffect`响应数据变化，实现动态数据流和UI更新。

在React应用开发中，组件之间的数据通信是核心概念之一。虽然父组件向子组件传递数据通常通过props实现，但子组件向父组件传递数据（即“数据提升”）则需要不同的策略。本文将详细介绍如何通过回调函数和React的状态管理机制，实现子组件（如一个输入表单）将其内部数据传递给父组件，并触发父组件中的数据请求等副作用。

理解React的数据流

React推崇单向数据流（One-Way Data Flow），这意味着数据通常是从父组件流向子组件。当子组件需要影响父组件的状态或行为时，它不能直接修改父组件的数据。相反，父组件会向子组件传递一个函数（作为props），子组件在特定事件发生时调用这个函数，并将需要传递的数据作为参数传递给它。父组件接收到数据后，可以更新自身的状态，从而实现数据从子组件“回流”到父组件。

实施子组件向父组件的数据传递

我们将以一个输入框组件InputField和一个主应用组件App为例，演示如何将InputField中用户输入的值传递给App组件，并用于App组件中的API请求。

1. 修改子组件：InputField.js

InputField组件负责渲染一个输入框和提交按钮。当用户提交表单时，它需要将输入的值传递给父组件。这可以通过在组件的props中接收一个回调函数来实现。

首先，修改InputField组件以接收一个名为onSubmit的prop。这个onSubmit prop将是一个函数，由父组件提供。当表单提交时，我们调用这个函数，并将输入框的值作为参数传递给它。

// 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("Input value from child:", inputVal);    // 调用父组件传递的回调函数，并传入输入值    if (onSubmit) {      onSubmit(inputVal);     }  }  return (                      );}

在上述代码中：

InputField组件现在解构了onSubmit prop。在handleSubmit函数内部，获取到inputVal后，我们调用了onSubmit(inputVal)。这意味着当表单提交时，inputVal会被发送到父组件。

2. 修改父组件：App.js

App组件需要完成以下几件事：

声明一个状态变量来存储从InputField接收到的值。创建一个处理函数，作为onSubmit prop传递给InputField。这个函数将负责更新状态变量。修改useEffect钩子，使其依赖于这个新的状态变量，以便在输入值变化时重新发起API请求。重要提示：在React中，组件应该通过JSX语法来渲染，而不是像调用普通函数那样InputField()。直接调用函数会导致每次渲染都创建一个新的组件实例，失去React的组件优化和生命周期管理。

// 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请求的token数据  const [tokens, setTokens] = useState([]);  // 状态用于管理加载状态  const [loading, setLoading] = useState(false);  // 处理从InputField组件传递过来的值  const handleSearchSubmit = (val) => {    setSearchValue(val); // 更新searchValue状态  };  // useEffect 钩子用于在searchValue变化时发起API请求  useEffect(() => {    // 只有当searchValue不为null时才发起请求，避免初始加载时发送无效请求    if (searchValue) {       setLoading(true);      fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) // 使用searchValue        .then(response => response.json())        .then(json => setTokens(json))        .catch(error => {          console.error("Error fetching tokens:", error);          setTokens([]); // 请求失败时清空数据        })        .finally(() => {          setLoading(false);        });    } else {      setTokens([]); // 如果没有搜索值，则清空token数据    }    console.log("Current tokens state:", tokens); // 注意：这里的tokens可能是旧值，因为useState是异步更新的  }, [searchValue]); // 将searchValue添加到依赖数组中，当searchValue变化时重新执行useEffect  // ... (round 和 numberWithSpaces 函数保持不变)  function round(nr, ten) { // arondi un chiffre.    return Math.round(nr * ten) / ten;  }  function numberWithSpaces(nr) { // formate un chiffre(x xxx xxx).    return nr.toString().replace(/B(?=(d{3})+(?!d))/g, " ");  }  return (    
 {/* 将  改为 
，因为 content 不是标准HTML标签 */}        
            
                
Total number of accounts
                
            
            
                {/* 正确地渲染InputField组件，并将handleSearchSubmit作为onSubmit prop传递 */}                             
            
当前搜索地址: {searchValue || "未输入"}
 {/* 显示当前搜索值 */}        
        
                          {loading ? (                
Loading...
              ) : (                                  
Tokens
                  
                    {tokens.length > 0 ? tokens.map(token => (                       {/* 使用更稳定的key */}                                            )) : (                                            )}                  
                    
                      Name                      Price                      Hold                    
                    
                        @@##@@                           
{token.name}
                         		                         
${round(token.price, 10000000)}
 		                                                   
{round(token.balance / Math.pow(10, token.decimals), 10000000)}
                           
${round(token.valueUsd, 10000000)}
                        		                      
暂无代币数据，请尝试输入地址。
                        
       
  );}export default App;

在上述代码中：

useState(null)创建了一个名为searchValue的状态变量，用于存储从InputField获取的地址。handleSearchSubmit函数被定义为接收一个参数val，并使用setSearchValue(val)来更新searchValue状态。是关键所在。我们将handleSearchSubmit函数作为onSubmit prop传递给InputField。当InputField内部调用onSubmit(inputVal)时，实际上就是调用了App组件中的handleSearchSubmit函数，并将inputVal作为参数传递过去。useEffect的依赖数组现在包含了[searchValue]。这意味着每当searchValue状态发生变化时（即用户提交了新的地址），useEffect中的代码就会重新执行，从而触发新的API请求。添加了if (searchValue)条件判断，确保只有当searchValue有值时才发起API请求，避免在组件初次渲染时（searchValue为null）发送无效请求。将content标签修正为div，并为img标签添加了alt属性。

关键概念回顾

Props (属性)：是React组件之间传递数据的主要方式。父组件通过props向子组件传递数据和函数。State (状态)：组件内部管理数据的方式。当状态改变时，组件会重新渲染。回调函数作为Props：实现子组件向父组件通信的关键机制。子组件调用父组件作为prop传递的函数，并将数据作为参数传递。useEffect依赖数组：控制副作用（如API请求）执行时机的重要工具。当依赖数组中的值发生变化时，useEffect会重新执行。

注意事项

组件渲染方式：务必使用JSX语法来渲染组件，而不是ComponentName()。回调函数命名：通常，传递给子组件的回调函数以on开头，后跟事件名称（如onSubmit, onClick等），以清晰表明其用途。初始加载与空状态：在useEffect中处理searchValue为null或空字符串的情况，避免发送不必要的或错误的API请求。错误处理：在fetch请求中添加.catch()块来处理网络错误或API响应错误，提升用户体验。加载指示：在数据请求期间显示加载状态（如“Loading…”），告知用户应用正在工作。

总结

通过本教程，我们学习了如何在React中实现子组件向父组件传递数据。核心方法是父组件将一个回调函数作为props传递给子组件，子组件在特定事件发生时调用此回调函数并传递数据。父组件接收到数据后，可以更新自身的状态，并结合useEffect钩子来响应这些数据变化，执行相应的副作用操作，如发起API请求。掌握这一模式对于构建复杂且交互性强的React应用至关重要。

{token.name

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

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
提升React Web应用中Shadow DOM内部内容的可访问性
上一篇 2025年12月20日 20:54:21
深入解析JavaScript switch语句的穿透行为与代码执行机制
下一篇 2025年12月20日 20:54:28

相关推荐

发表回复

登录后才能评论
关注微信