如何将Sidebar按钮事件传递给React的ChatBody组件？

1. 父组件DashboardPage正确管理状态并传递回调 #

在父组件中维护点击状态，同时定义点击回调函数，将回调传给Sidebar，并把状态传递给ChatBody：

import { useState } from 'react';
import Sidebar from './Sidebar';
import ChatBody from './ChatBody';

function DashboardPage() {
  // 用状态存储点击的按钮标识（比如ID、名称）
  const [activeButton, setActiveButton] = useState(null);

  // 点击回调，接收按钮标识并更新状态
  const handleButtonClick = (buttonId) => {
    setActiveButton(buttonId);
  };

  return (
    <div className="dashboard">
      <Sidebar onButtonClick={handleButtonClick} />
      <ChatBody activeButton={activeButton} />
    </div>
  );
}

export default DashboardPage;

2. 子组件传递回调至按钮层 #

Sidebar只需将父组件传来的回调继续传递给SidebarButtons：

import SidebarButtons from './SidebarButtons';

function Sidebar({ onButtonClick }) {
  return (
    <div className="sidebar">
      <SidebarButtons onButtonClick={onButtonClick} />
    </div>
  );
}

export default Sidebar;

SidebarButtons中给按钮绑定点击事件，调用传入的回调并传递按钮标识：

function SidebarButtons({ onButtonClick }) {
  return (
    <div className="sidebar-buttons">
      <button onClick={() => onButtonClick('btn1')}>按钮1</button>
      <button onClick={() => onButtonClick('btn2')}>按钮2</button>
      <button onClick={() => onButtonClick('btn3')}>按钮3</button>
    </div>
  );
}

export default SidebarButtons;

3. ChatBody响应状态变化 #

在ChatBody中直接使用传入的状态，或通过useEffect监听状态变化执行逻辑：

import { useEffect } from 'react';

function ChatBody({ activeButton }) {
  // 组件渲染时直接打印状态，状态变化会触发重新渲染
  console.log('当前激活按钮:', activeButton);

  // 监听状态变化，执行额外业务逻辑
  useEffect(() => {
    if (activeButton) {
      console.log(`处理按钮${activeButton}的点击逻辑`);
      // 这里可添加加载聊天内容等操作
    }
  }, [activeButton]); // 依赖项设为activeButton，状态变化时触发

  return (
    <div className="chat-body">
      {activeButton ? `当前选中：${activeButton}` : '请选择一个按钮'}
    </div>
  );
}

export default ChatBody;

常见问题排查 #

• 禁止直接修改activeButton状态，必须通过setActiveButton更新，React无法监听直接修改的状态。
• 检查回调函数的传递路径，确保Sidebar和SidebarButtons中没有拼写错误（比如参数名大小写）。
• 如果ChatBody使用了memo优化，需确认依赖项设置正确，避免阻止组件在状态变化时重新渲染。

内容的提问来源于stack exchange，提问作者Владимир Солёный