React子组件到兄弟组件事件传递方法

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《React组件通信：子到兄弟的事件传递技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

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

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

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

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

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

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

1. 在它们的最近公共父组件 (DashboardPage) 中定义一个状态来存储共享数据。
2. 父组件将更新这个状态的函数作为 prop 传递给触发事件的子组件 (Sidebar -> SidebarButtons)。
3. 父组件将存储共享数据的状态作为 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>
  );
};

说明：

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

通过遵循这些原则和实践，您可以有效地在 React 应用中管理组件间的事件数据传递，构建出结构清晰、易于维护的交互式界面。

到这里，我们也就讲完了《React子组件到兄弟组件事件传递方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！