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 from SidebarButtons received in DashboardPage:", action);
    // 此时，ChatBody 无法直接获取到这个 action
  };

  return (
    <Container fluid>
      <Row>
        <Col className="p-0" md={2}>
          <div>
            <Sidebar handleClick={handleClick} /> {/* 将 handleClick 传递给 Sidebar */}
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            <ChatBody /> {/* ChatBody 当前无法接收到具体 action */}
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardPage;

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

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

export default Sidebar;

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

const SidebarButtons = ({ handleClick }) => { // 接收 handleClick prop
  return (
    <div>
      <Row>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleClick("previous")} // 调用 handleClick 并传入参数
          >
            previous
          </Button>
        </Col>
        <Col className="m-2">
          <Button
            className="mx-auto p-2 w-100"
            variant="success"
            onClick={() => handleClick("next")} // 调用 handleClick 并传入参数
          >
            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")} // 调用 handleClick 并传入参数
          >
            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">
      {/* 初始状态下，ChatBody 无法感知 SidebarButtons 的点击事件 */}
    </Container>
  );
};

export default ChatBody;

// DashboardPage.js (更新后的版本)
import React, { useState, useEffect } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Sidebar from './Sidebar';
import ChatBody from './ChatBody';
// import Header from './Header'; // 假设 Header 组件存在

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

  // handleClick 函数现在会更新 buttonClickAction 状态
  const handleClick = (action) => {
    console.log("DashboardPage received action and updating state:", action);
    setButtonClickAction(action); // 更新状态
  };

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

export default DashboardPage;

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

const ChatBody = ({ buttonClickAction }) => { // 接收 buttonClickAction prop
  // 使用 useEffect 钩子来响应 buttonClickAction 的变化
  useEffect(() => {
    if (buttonClickAction) { // 只有当 buttonClickAction 有值时才执行
      console.log("ChatBody received updated action:", buttonClickAction);
      // 在这里可以根据 buttonClickAction 更新 ChatBody 的UI或执行其他逻辑
      // 例如，根据 action 加载不同的聊天内容
    }
  }, [buttonClickAction]); // 依赖项为 buttonClickAction，当其改变时触发此 effect

  return (
    <Container fluid className="position-relative px-0">
      {/* 根据 buttonClickAction 显示不同的内容 */}
      {buttonClickAction ? (
        <p>当前选择的操作: <strong>{buttonClickAction}</strong></p>
      ) : (
        <p>请从侧边栏选择一个操作...</p>
      )}
    </Container>
  );
};

export default ChatBody;

// Sidebar.js 和 SidebarButtons.js 保持不变，因为它们只负责调用 handleClick