React组件间事件处理器与状态传递：从父组件到多级子组件的实践指南

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

const DashboardPage = () => {
  const handleClick = (action) => {
    console.log(action); // 期望此处能打印出点击的按钮类型
  };

  return (
    <Container fluid>
      {/* <Header /> */} {/* 假设有一个Header组件 */}
      <Row>
        <Col className="p-0" md={2}>
          <div>
            <Sidebar handleClick={handleClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            {/* ChatBody 需要知道 handleClick 发生了什么 */}
            <ChatBody /* 如何将 action 传递给 ChatBody? */ />
          </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">
      <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>
      <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;

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

const ChatBody = () => {
  return (
    <Container fluid className="position-relative px-0">
      {/* 这里需要根据按钮点击的类型显示不同的内容 */}
    </Container>
  );
};

export default ChatBody;

// DashboardPage.js (部分更新)
import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Sidebar from './Sidebar';
import ChatBody from './ChatBody';
// import Header from './Header'; // 假设 Header 组件存在

const DashboardPage = () => {
  const handleClick = (action) => {
    console.log("Action received in DashboardPage:", action);
    // 这里可以执行其他逻辑，例如根据 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>
            {/* 将 handleClick 直接传递给 ChatBody */}
            <ChatBody handleClick={handleClick} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardPage;

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

const ChatBody = ({ handleClick }) => {
  // 仅作演示，如果 ChatBody 自身需要触发 handleClick，可以直接调用它
  // 如果 ChatBody 只是想知道 handleClick 被调用了，或者它的参数，
  // 那么这种方式需要 ChatBody 内部有逻辑去调用 handleClick，
  // 或者监听 handleClick prop 的变化（这通常不是最直接的用途）。
  useEffect(() => {
    console.log("ChatBody received handleClick prop:", handleClick);
    // 注意：这里的 handleClick 是一个函数，它本身不会“变化”，
    // 除非 DashboardPage 重新定义了这个函数（例如，在某个状态变化后）。
    // 如果你期望这里能打印出按钮点击的 action，那么这种方式是不够的。
  }, [handleClick]);

  return (
    <Container fluid className="position-relative px-0">
      {/* ChatBody 的内容 */}
      <p>ChatBody is ready to react or trigger actions.</p>
      {/* 示例：ChatBody 内部的一个按钮调用父组件的 handleClick */}
      {/* <button onClick={() => handleClick("internalAction")}>Trigger from ChatBody</button> */}
    </Container>
  );
};

export default ChatBody;

// DashboardPage.js (更新为状态管理模式)
import React, { useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Sidebar from './Sidebar';
import ChatBody from './ChatBody';
// import Header from './Header';

const DashboardPage = () => {
  // 定义一个状态来存储按钮点击的动作
  const [buttonClick, setButtonClick] = useState(null);

  const handleClick = (action) => {
    console.log("Action received in DashboardPage:", action);
    // 更新状态，这将导致 ChatBody 重新渲染并接收到新的 buttonClick 值
    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 传递给 ChatBody */}
            <ChatBody buttonClick={buttonClick} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardPage;

// ChatBody.js (更新为接收状态模式)
import React, { useEffect } from 'react';
import { Container } from 'react-bootstrap';

const ChatBody = ({ buttonClick }) => {
  // 使用 useEffect 监听 buttonClick prop 的变化
  useEffect(() => {
    if (buttonClick) { // 确保 buttonClick 不为 null
      console.log("ChatBody detected buttonClick action:", buttonClick);
      // 根据 buttonClick 的值执行相应的逻辑，例如：
      // if (buttonClick === "previous") {
      //   // 加载上一页消息
      // } else if (buttonClick === "next") {
      //   // 加载下一页消息
      // }
    }
  }, [buttonClick]); // 依赖项数组包含 buttonClick，只有当 buttonClick 改变时才执行 effect

  return (
    <Container fluid className="position-relative px-0">
      <h3>当前操作: {buttonClick ? buttonClick : "无"}</h3>
      {/* 根据 buttonClick 的值渲染不同的内容 */}
      {buttonClick === "newMessages" && <p>正在显示最新消息...</p>}
      {/* 其他 ChatBody 内容 */}
    </Container>
  );
};

export default ChatBody;