React 组件间事件与数据传递：深度解析与实践-js教程-PHP中文网

react 组件间事件与数据传递：深度解析与实践

本教程详细阐述了在 React 应用中，父组件如何有效地将事件处理函数和事件触发的数据传递给其子组件。通过实际代码示例，我们将学习如何利用 props 进行事件处理函数的逐级传递，以及如何结合 useState 钩子在父组件中管理状态，并将事件产生的动态数据传递给不直接触发事件的子组件，同时探讨 useEffect 在子组件中响应数据变化的机制与注意事项。

1. React 组件间通信基础

在 React 中，组件之间的数据流是单向的，即数据从父组件流向子组件。这种机制主要通过 props（属性）来实现。props 不仅可以传递静态数据，也可以传递函数（事件处理函数）或状态值。理解 props 的传递方式是构建复杂 React 应用的基础。

当一个子组件需要响应用户交互（例如点击按钮）时，通常由父组件定义一个事件处理函数，并通过 props 将其传递给子组件。子组件在内部调用这个函数时，可以将相关数据回传给父组件。如果另一个子组件需要根据这些事件触发的数据进行渲染或执行逻辑，父组件需要管理一个状态来存储这些数据，并将该状态作为 props 传递给目标子组件。

2. 传递事件处理函数：从父组件到交互式子组件

在我们的示例中，DashboardPage 是父组件，它定义了一个 handleClick 事件处理函数。Sidebar 和 ChatBody 是它的直接子组件，而 SidebarButtons 又是 Sidebar 的子组件。

定义事件处理函数：

DashboardPage 组件负责定义 handleClick 函数。这个函数将接收一个 action 参数，代表用户执行的具体操作。

import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';

// 假设 Header 组件存在
const Header = () => <div style={{ height: '50px', background: '#f0f0f0' }}>Header</div>;

const DashboardPage = () => {
  // 定义事件处理函数
  const handleClick = (action) => {
    console.log(`Action received in DashboardPage: ${action}`);
    // 在这里可以执行更复杂的逻辑，例如更新全局状态、发送API请求等
  };

  return (
    <Container fluid>
      <Header />
      <Row>
        <Col className="p-0" md={2}>
          <div>
            {/* 将 handleClick 传递给 Sidebar */}
            <Sidebar handleClick={handleClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            {/* ChatBody 最初不需要直接触发事件，但可能需要响应事件产生的数据 */}
            {/* 在本节中，我们暂时不向 ChatBody 传递任何东西，后续会修改 */}
            <ChatBody />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

登录后复制

逐级传递事件处理函数：

Sidebar 组件接收 DashboardPage 传递的 handleClick prop，并将其进一步传递给其子组件 SidebarButtons。

// Sidebar.js
import React from 'react';
// 假设 SidebarButtons 组件存在
import SidebarButtons from './SidebarButtons'; 

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

export default Sidebar;

登录后复制

SidebarButtons 组件最终接收到 handleClick prop，并在其内部的按钮 onClick 事件中调用它，同时传入相应的 action 参数。

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

const SidebarButtons = ({ handleClick }) => {
  return (
    <div>
      <Row>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleClick("previous")} // 调用父组件传递的函数
          >
            previous
          </Button>
        </Col>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleClick("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={() => handleClick("newMessages")} // 调用父组件传递的函数
          >
            newMessages
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default SidebarButtons;

登录后复制

通过这种方式，SidebarButtons 中的按钮点击事件能够触发 DashboardPage 中定义的 handleClick 函数，实现了从深层子组件向父组件的数据回传（通过函数参数）。

3. 传递事件触发的数据：利用状态管理实现跨组件响应

现在，我们面临一个更复杂的需求：ChatBody 组件需要知道 SidebarButtons 中哪个按钮被点击了，并根据这个信息做出响应。ChatBody 并不直接触发这些点击事件，它只是一个消费者。在这种情况下，仅仅传递 handleClick 函数是不够的，我们需要将 handleClick 产生的数据（即 action 值）传递给 ChatBody。

这需要 DashboardPage 作为事件的协调者，利用 React 的 useState 钩子来管理这个动态数据。

百度作家平台

百度小说旗下一站式AI创作与投稿平台。

146

查看详情

在父组件中管理状态并传递：

DashboardPage 将引入 useState 来创建一个名为 buttonClick 的状态，并提供 setButtonClick 函数来更新它。handleClick 函数在接收到 action 后，会调用 setButtonClick 来更新这个状态。然后，DashboardPage 将这个 buttonClick 状态作为 prop 传递给 ChatBody。

// DashboardPage.js (更新后的版本)
import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
import Sidebar from './Sidebar'; // 确保导入 Sidebar
import ChatBody from './ChatBody'; // 确保导入 ChatBody

const Header = () => <div style={{ height: '50px', background: '#f0f0f0' }}>Header</div>;

const DashboardPage = () => {
  // 使用 useState 管理 buttonClick 状态
  const [buttonClick, setButtonClick] = useState(null);

  const handleClick = (action) => {
    console.log(`Action received in DashboardPage: ${action}`);
    // 更新状态，这将触发 ChatBody 的重新渲染
    setButtonClick(action); 
  };

  return (
    <Container fluid>
      <Header />
      <Row>
        <Col className="p-0" md={2}>
          <div>
            <Sidebar handleClick={handleClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            {/* 将 buttonClick 状态作为 prop 传递给 ChatBody */}
            <ChatBody buttonClick={buttonClick} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardPage;

登录后复制

4. 子组件中响应数据变化：useEffect 的应用与注意事项

ChatBody 组件现在接收 buttonClick prop。为了在 buttonClick 发生变化时执行某些副作用（例如打印日志、发起数据请求或更新 UI），我们可以使用 useEffect 钩子。

在 ChatBody 中使用 useEffect 监听 prop 变化：

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

const ChatBody = ({ buttonClick }) => {
  // 使用 useEffect 监听 buttonClick prop 的变化
  useEffect(() => {
    if (buttonClick) { // 只有当 buttonClick 有值时才执行
      console.log(`ChatBody received button click action: ${buttonClick}`);
      // 在这里可以根据 buttonClick 的值更新 ChatBody 的内容或执行其他逻辑
    }
  }, [buttonClick]); // 依赖项数组：只有当 buttonClick 的值发生变化时，effect 才会重新运行

  return (
    <Container fluid className="position-relative px-0">
      {/* 根据 buttonClick 的值渲染不同的内容 */}
      {buttonClick && (
        <p>Last clicked action: <strong>{buttonClick}</strong></p>
      )}
      {!buttonClick && (
        <p>No button has been clicked yet.</p>
      )}
    </Container>
  );
};

export default ChatBody;

登录后复制

重要提示：理解 useEffect 依赖项

在 ChatBody 的 useEffect 中，我们将 buttonClick 添加到了依赖项数组 [buttonClick]。这意味着 useEffect 中的代码块只会在 buttonClick 的值从上次渲染到当前渲染发生变化时才重新执行。

用户在原始问题中提到“只看到 console.log(buttonClick) 一次”。这很可能发生在以下情况：

用户点击了“previous”按钮。buttonClick 从 null 变为 "previous"，useEffect 执行并打印。
用户再次点击了“previous”按钮。buttonClick 的值仍然是 "previous"，没有发生变化。因此，useEffect 不会重新执行，不会再次打印。

如果你的需求是无论 action 值是否相同，只要按钮被点击就触发 ChatBody 的响应，你需要修改 DashboardPage 中 buttonClick 状态的更新策略。例如，可以传递一个包含时间戳或唯一 ID 的对象，以确保每次点击都会产生一个不同的状态值：

// DashboardPage.js (如果需要每次点击都触发 ChatBody 的响应)
const DashboardPage = () => {
  const [buttonClickEvent, setButtonClickEvent] = useState(null); // 状态名称改为 buttonClickEvent

  const handleClick = (action) => {
    console.log(`Action received in DashboardPage: ${action}`);
    // 每次点击都创建一个新的对象，确保状态值不同，从而触发 useEffect
    setButtonClickEvent({ action: action, timestamp: Date.now() }); 
  };

  return (
    // ...
    <ChatBody buttonClickEvent={buttonClickEvent} />
    // ...
  );
};

// ChatBody.js (相应修改)
const ChatBody = ({ buttonClickEvent }) => {
  useEffect(() => {
    if (buttonClickEvent) {
      console.log(`ChatBody received button click action: ${buttonClickEvent.action} at ${new Date(buttonClickEvent.timestamp).toLocaleTimeString()}`);
      // 使用 buttonClickEvent.action 进行逻辑处理
    }
  }, [buttonClickEvent]); // 依赖项改为 buttonClickEvent
  // ...
};

登录后复制

通过这种方式，即使连续点击相同的按钮，buttonClickEvent 也会因为 timestamp 的变化而更新，从而强制 ChatBody 中的 useEffect 重新执行。

5. 完整示例代码

以下是整合了所有组件和逻辑的完整代码示例，展示了如何在 React 中有效地传递事件处理函数和事件触发的数据。

// App.js 或 index.js (主入口文件，用于渲染 DashboardPage)
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css'; // 导入 Bootstrap 样式
import DashboardPage from './DashboardPage';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DashboardPage />
  </React.StrictMode>
);

// DashboardPage.js
import React, { useState, useEffect } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Sidebar from './Sidebar';
import ChatBody from './ChatBody';

const Header = () => <div style={{ height: '50px', background: '#f0f0f0', marginBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Header Component</div>;

const DashboardPage = () => {
  // 使用 useState 管理 buttonClick 状态，用于传递给 ChatBody
  const [buttonClick, setButtonClick] = useState(null);

  const handleClick = (action) => {
    console.log(`Action received in DashboardPage: ${action}`);
    // 更新状态，这将触发 ChatBody 的重新渲染
    setButtonClick(action); 
  };

  return (
    <Container fluid>
      <Header />
      <Row>
        <Col className="p-0" md={2}>
          <div>
            <Sidebar handleClick={handleClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            {/* 将 buttonClick 状态作为 prop 传递给 ChatBody */}
            <ChatBody buttonClick={buttonClick} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardPage;

// Sidebar.js
import React from 'react';
import SidebarButtons from './SidebarButtons'; 

const Sidebar = ({ handleClick }) => {
  return (
    <div className="border-right" id="sidebar-wrapper" style={{ minHeight: 'calc(100vh - 60px)', background: '#e9ecef', padding: '15px' }}>
      <p>Sidebar Content</p>
      <SidebarButtons handleClick={handleClick} />
    </div>
  );
};

export default Sidebar;

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

const SidebarButtons = ({ handleClick }) => {
  return (
    <div style={{ marginTop: '20px' }}>
      <h6>Navigation Actions</h6>
      <Row>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleClick("previous")}
          >
            Previous
          </Button>
        </Col>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleClick("next")}
          >
            Next
          </Button>
        </Col>
        <Col className="m-2">
          <

登录后复制

以上就是React 组件间事件与数据传递：深度解析与实践的详细内容，更多请关注php中文网其它相关文章！