React父组件数据传递方法详解

本教程深入讲解React中子组件向父组件传递数据的实用技巧，符合百度SEO规范。React单向数据流是核心，父组件通过props传递回调函数给子组件，子组件在特定事件触发时调用该回调，并回传数据。父组件利用状态管理接收数据，并通过`useEffect` Hook响应数据变化，从而触发动态数据请求，避免直接调用组件函数。文章通过InputField组件向App组件传递地址信息的实例，详细阐述了如何定义回调函数、更新父组件状态，以及使用`useEffect`进行数据请求。掌握这种“提升状态”的通信模式，对于构建复杂的React应用至关重要。避免直接调用组件函数，清晰命名props，是提升代码可读性的关键。

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

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

理解React数据流与组件通信

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

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

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

1. 修改子组件：InputField.js

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

// InputField.js
import 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 (
    <form method="post" onSubmit={handleSubmit}>
      &lt;input name=&quot;myInput&quot; id=&quot;adress-field&quot; placeholder=&quot;Enter adress&quot; autoComplete=&quot;on&quot; /&gt;
      <button type="submit" id="adress-button">Send</button>
    </form>
  );
}

关键点：

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

2. 修改父组件：App.js

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

// App.js
import './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 (
    <content className="content">
        <div className="up-side">
            <div className="account-number-box">
                <p id="p-account-number">Total number of accounts</p>
                <p id="account-number"><AccountNumber/></p>
            </div>
            <div className="adress-search">
                {/* 将 handleSearchSubmit 函数作为 onSubmit prop 传递给 InputField */}
                <InputField onSubmit={handleSearchSubmit} /> 
            </div>
            {/* 可以显示当前 searchValue 进行调试 */}
            <p>当前搜索地址: {searchValue || '未输入'}</p>
        </div>
        <div className="down-side">
            <table className="Token-section-output">
              {loading ? (
                <div>Loading...</div>
              ) : (
                <>
                  <h1>Tokens</h1>
                  <table className='Token-section-output' border={0}>
                    <tr className='token-row-type'>
                      <th className='token-column'>Name</th>
                      <th className='center-column'>Price</th>
                      <th>Hold</th>
                    </tr>
                    <tr className="space20"/>
                    {tokens.map(token => (
                      <tr className='token-row' key={token.id}>
                        <td className='token-column'>
                        <img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} /> 
                          <p>{token.name}</p> 
                        </td>
                        <td className='center-column'> <p>${round(token.price, 10000000)}</p> </td>
                        <td> 
                          <p>{round(token.balance / Math.pow(10, token.decimals), 10000000)}</p> 
                          <p className='token-hold'>${round(token.valueUsd, 10000000)}</p>
                        </td>
                      </tr>
                    ))}
                  </table>
                </>
              )}
            </table>
        </div>   
    </content>
  );
}

// 辅助函数（保持不变）
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;

关键点：

• 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）。

核心概念回顾：

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

注意事项：

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

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

理论要掌握，实操不能落！以上关于《React父组件数据传递方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！