React 组件间事件数据传递：从嵌套子组件到兄弟组件的通信实践-js教程-PHP中文网

react 组件间事件数据传递：从嵌套子组件到兄弟组件的通信实践

本教程详细阐述了在 React 应用中，如何实现从深层嵌套子组件触发的事件数据，通过公共父组件传递给其兄弟组件。文章通过一个实际案例，演示了利用 React 的状态管理（useState）和属性传递机制，构建清晰、可维护的组件通信流程，并深入探讨了 useEffect 钩子在响应状态变化时的行为，确保数据流的准确性和可预测性。

1. 理解 React 组件通信的核心挑战

在 React 应用中，组件间的通信是构建复杂用户界面的基础。常见通信模式包括：

父组件向子组件通信： 通过 props 传递数据或函数。
子组件向父组件通信： 通过父组件传递给子组件的“回调函数” (props 中的函数) 来实现。子组件调用这个函数，并将数据作为参数传回父组件。

然而，当我们需要在两个兄弟组件之间共享由其中一个兄弟组件内部事件触发的数据时，情况会稍微复杂。React 的单向数据流原则要求所有共享状态都应提升到它们最近的共同祖先组件中进行管理。

在本文的场景中，SidebarButtons 组件（Sidebar 的子组件）触发了一个点击事件，并带有一个特定的 action 字符串（如 "previous", "next", "newMessages"）。我们希望将这个 action 字符串传递给 ChatBody 组件，而 Sidebar 和 ChatBody 都是 DashboardPage 的子组件，因此它们是兄弟关系。

2. 解决方案：状态提升与回调函数

解决兄弟组件通信问题的标准方法是：

在它们的最近公共父组件 (DashboardPage) 中定义一个状态来存储共享数据。
父组件将更新这个状态的函数作为 prop 传递给触发事件的子组件 (Sidebar -> SidebarButtons)。
父组件将存储共享数据的状态作为 prop 传递给需要使用这些数据的子组件 (ChatBody)。

这种模式确保了数据流的清晰性和可预测性，遵循了 React 的核心原则。

3. 实现步骤与示例代码

我们将通过重构提供的代码来演示这一过程。

3.1 定义公共父组件中的状态和回调函数

首先，在 DashboardPage 组件中引入 useState 钩子来管理 buttonClick 状态，并定义一个 handleClick 函数来更新这个状态。

import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
// 假设 Header, Sidebar, ChatBody, SidebarButtons 已经导入

// DashboardPage 组件
const DashboardPage = () => {
  // 定义一个状态来存储 SidebarButtons 触发的动作
  const [buttonClickAction, setButtonClickAction] = useState(null);

  // 定义一个回调函数，用于更新 buttonClickAction 状态
  const handleActionClick = (action) => {
    console.log("DashboardPage received action:", action);
    setButtonClickAction(action); // 更新状态
  };

  return (
    <Container fluid>
      {/* <Header />  如果存在，请取消注释 */}
      <Row>
        <Col className="p-0" md={2}>
          <div>
            {/* 将回调函数传递给 Sidebar */}
            <Sidebar handleActionClick={handleActionClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            {/* 将状态传递给 ChatBody */}
            <ChatBody clickedAction={buttonClickAction} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

登录后复制

说明：

小鸽子助手

一款集成于WPS/Word的智能写作插件

查看详情

buttonClickAction：这是一个状态变量，用于存储从 SidebarButtons 接收到的最新点击动作。初始值为 null。
setButtonClickAction：这是更新 buttonClickAction 状态的函数。
handleActionClick：这是一个函数，它接收一个 action 参数，并使用 setButtonClickAction 来更新父组件的状态。这个函数将被作为 prop 传递给 Sidebar。

3.2 传递回调函数至事件触发组件

接下来，Sidebar 组件需要将 handleActionClick 进一步传递给其子组件 SidebarButtons。

// Sidebar.js
import React from 'react';
// 假设 SidebarButtons 已经导入

const Sidebar = ({ handleActionClick }) => {
  return (
    <div className="border-right" id="sidebar-wrapper">
      {/* 将回调函数传递给 SidebarButtons */}
      <SidebarButtons handleActionClick={handleActionClick} />
    </div>
  );
};

登录后复制

然后，SidebarButtons 组件将使用这个回调函数来触发事件并传递数据。

// SidebarButtons.js
import React from 'react';
import { Row, Col, Button } from 'react-bootstrap';

const SidebarButtons = ({ handleActionClick }) => {
  return (
    <div>
      <Row>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleActionClick("previous")} // 调用父组件传递的回调函数
          >
            previous
          </Button>
        </Col>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleActionClick("next")} // 调用父组件传递的回调函数
          >
            next
          </Button>
        </Col>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100 d-flex justify-content-around align-items-center"
            variant="light"
            onClick={() => handleActionClick("newMessages")} // 调用父组件传递的回调函数
          >
            newMessages
          </Button>
        </Col>
      </Row>
    </div>
  );
};

登录后复制

说明：

SidebarButtons 通过 props 接收 handleActionClick。
当按钮被点击时，onClick 事件处理器会调用 handleActionClick，并将相应的 action 字符串作为参数传递。这个参数最终会回传到 DashboardPage 的 handleActionClick 函数中，从而更新 buttonClickAction 状态。

3.3 在兄弟组件中接收并响应数据

最后，ChatBody 组件将通过 props 接收 DashboardPage 中更新后的 buttonClickAction 状态。我们可以使用 useEffect 钩子来监听这个 prop 的变化，并执行相应的副作用。

// ChatBody.js
import React, { useEffect } from 'react';
import { Container } from 'react-bootstrap';

const ChatBody = ({ clickedAction }) => {
  // 使用 useEffect 钩子来响应 clickedAction prop 的变化
  useEffect(() => {
    if (clickedAction !== null) { // 避免在组件初次渲染时，clickedAction 为 null 时的不必要操作
      console.log("ChatBody received clicked action:", clickedAction);
      // 在这里可以根据 clickedAction 的值执行 ChatBody 内部的逻辑，
      // 例如：加载对应的内容、更新 UI 等。
    }
  }, [clickedAction]); // 依赖数组，只有当 clickedAction 发生变化时，useEffect 才会重新运行

  return (
    <Container fluid className="position-relative px-0">
      {/* ChatBody 的内容，可以根据 clickedAction 渲染不同内容 */}
      {clickedAction && <p>Last action clicked: {clickedAction}</p>}
      {!clickedAction && <p>No action clicked yet.</p>}
    </Container>
  );
};

登录后复制

说明：

ChatBody 通过 props 接收 clickedAction。
useEffect 钩子被用来监听 clickedAction 的变化。当 DashboardPage 的 buttonClickAction 状态更新时，ChatBody 会重新渲染，并且 clickedAction prop 的值会更新，从而触发 useEffect 内部的逻辑。
关于 useEffect 仅执行一次的疑惑： useEffect 的第二个参数（依赖数组 [clickedAction]）决定了它何时重新运行。它只会在 clickedAction 的值发生变化时才执行。如果用户连续点击同一个按钮（例如，连续点击 "previous"），buttonClickAction 的值并没有改变，因此 useEffect 不会再次触发。这是 useEffect 的正常且预期行为。如果需要每次点击都触发一个效果，即使值相同，通常需要改变状态的结构（例如，存储一个包含时间戳或唯一 ID 的对象，或者一个递增的计数器）。然而，对于简单地响应“最新点击的动作”而言，当前实现是正确的。

4. 完整代码结构概览

为了清晰起见，以下是所有相关组件的完整代码结构：

// App.js (或包含 DashboardPage 的主文件)
import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';

// SidebarButtons.js
const SidebarButtons = ({ handleActionClick }) => {
  return (
    <div>
      <Row>
        <Col className="m-2">
          <Button className="mx-auto p-2 w-100" variant="success" onClick={() => handleActionClick("previous")}>previous</Button>
        </Col>
        <Col className="m-2">
          <Button className="mx-auto p-2 w-100" variant="success" onClick={() => handleActionClick("next")}>next</Button>
        </Col>
        <Col className="m-2">
          <Button className="mx-auto p-2 w-100 d-flex justify-content-around align-items-center" variant="light" onClick={() => handleActionClick("newMessages")}>newMessages</Button>
        </Col>
      </Row>
    </div>
  );
};

// Sidebar.js
const Sidebar = ({ handleActionClick }) => {
  return (
    <div className="border-right" id="sidebar-wrapper">
      <SidebarButtons handleActionClick={handleActionClick} />
    </div>
  );
};

// ChatBody.js
const ChatBody = ({ clickedAction }) => {
  useEffect(() => {
    if (clickedAction !== null) {
      console.log("ChatBody received clicked action:", clickedAction);
      // 根据 clickedAction 执行 ChatBody 内部逻辑
    }
  }, [clickedAction]);

  return (
    <Container fluid className="position-relative px-0">
      {clickedAction && <p>Last action clicked: {clickedAction}</p>}
      {!clickedAction && <p>No action clicked yet.</p>}
    </Container>
  );
};

// DashboardPage.js (主组件)
const DashboardPage = () => {
  const [buttonClickAction, setButtonClickAction] = useState(null);

  const handleActionClick = (action) => {
    console.log("DashboardPage received action:", action);
    setButtonClickAction(action);
  };

  return (
    <Container fluid>
      {/* <Header /> */}
      <Row>
        <Col className="p-0" md={2}>
          <div>
            <Sidebar handleActionClick={handleActionClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            <ChatBody clickedAction={buttonClickAction} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardPage; // 导出 DashboardPage 作为主组件

登录后复制

5. 注意事项与最佳实践

单一数据源： 确保共享状态只在一个地方（公共祖先组件）进行管理，避免数据不一致。
清晰的命名： 为 props 和状态变量使用描述性名称，提高代码可读性。
避免不必要的 prop 传递： 只传递子组件实际需要的 props，避免“prop 钻取”（prop drilling）过深。如果组件层级非常深，可以考虑使用 React Context API 或 Redux 等状态管理库。
useEffect 依赖数组： 仔细管理 useEffect 的依赖数组。空数组 [] 表示只在组件挂载和卸载时运行；省略依赖数组表示每次渲染都运行；包含依赖项的数组表示只有当这些依赖项发生变化时才运行。
性能优化： 对于频繁更新的回调函数，如果它没有依赖任何会频繁变化的值，可以使用 useCallback 钩子进行记忆化，以避免不必要的子组件重新渲染。在本例中，handleActionClick 依赖 setButtonClickAction（React 保证其引用稳定）且不依赖其他频繁变化的值，因此通常不需要 useCallback。