React 组件事件处理函数传递与兄弟组件通信实践

import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
// 假设 Header 组件存在
// import Header from './Header'; 

const DashboardPage = () => {
  const handleClick = (action) => {
    console.log(`Action triggered: ${action}`);
    // 这里可以包含更复杂的逻辑，例如更新状态、发送API请求等
  };

  return (
    <Container fluid>
      {/* <Header /> */}
      <Row>
        <Col className="p-0" md={2}>
          <div>
            <Sidebar handleClick={handleClick} />
          </div>
        </Col>
        <Col className="p-0" md={9}>
          <div>
            {/* ChatBody 也可以直接接收 handleClick，如果它需要触发相同的动作 */}
            <ChatBody handleClick={handleClick} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

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

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

// 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")}
          >
            New Messages
          </Button>
        </Col>
      </Row>
    </div>
  );
};

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

const ChatBody = ({ handleClick }) => {
  // 这里的 useEffect 监听 handleClick 引用本身的变化。
  // 通常，如果 handleClick 是一个稳定的函数，这个 effect 只会在组件挂载时触发一次。
  // 它并不能直接感知 SidebarButtons 调用 handleClick 时传入的参数。
  useEffect(() => {
    console.log("ChatBody received handleClick prop:", handleClick);
  }, [handleClick]);

  return (
    <Container fluid className="position-relative px-0">
      {/* Your ChatBody content */}
      <p>ChatBody is ready.</p>
    </Container>
  );
};

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

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

  const handleClick = (action) => {
    console.log(`Action triggered: ${action}`);
    // 更新父组件的状态
    setLastAction(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>
            {/* 将状态作为 prop 传递给 ChatBody */}
            <ChatBody lastAction={lastAction} />
          </div>
        </Col>
      </Row>
    </Container>
  );
};

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

const ChatBody = ({ lastAction }) => {
  useEffect(() => {
    if (lastAction) {
      console.log(`ChatBody received new action from Dashboard: ${lastAction}`);
      // 根据 lastAction 的值更新 ChatBody 的内容或行为
      // 例如：
      // if (lastAction === "previous") { /* 加载上一条消息 */ }
      // else if (lastAction === "next") { /* 加载下一条消息 */ }
      // else if (lastAction === "newMessages") { /* 显示新消息提示 */ }
    }
  }, [lastAction]); // 监听 lastAction 的变化

  return (
    <Container fluid className="position-relative px-0">
      {/* Your ChatBody content */}
      <p>当前动作: {lastAction || "无"}</p>
      {/* 根据 lastAction 渲染不同的内容 */}
    </Container>
  );
};