React父子组件信息传递方案：解决同级聊天组件数据共享问题

你可以通过状态提升的方式实现，核心是把共享状态放到父组件中，再通过props把状态和更新方法分发给子组件，具体步骤如下：

1. 父组件维护状态与分发Props #

在包裹ChatSidebar和SelectedChat的父组件中，用useState管理选中的用户/房间信息，同时定义更新状态的方法，分别传递给两个子组件：

import { useState } from 'react';
import ChatSidebar from './ChatSidebar';
import SelectedChat from './SelectedChat';

function MessagesContainer() {
  // 初始化选中的用户信息，默认可以为null或空对象
  const [selectedChatUser, setSelectedChatUser] = useState(null);

  // 定义更新选中用户的方法
  const handleSelectChat = (userInfo) => {
    setSelectedChatUser(userInfo);
  };

  return (
    <div className='messages-container'>
      {/* 把更新方法传给ChatSidebar */}
      <ChatSidebar onSelectChat={handleSelectChat} />
      {/* 把选中的用户信息传给SelectedChat */}
      <SelectedChat currentUser={selectedChatUser} />
    </div>
  );
}

export default MessagesContainer;

2. ChatSidebar组件触发选择事件 #

在ChatSidebar中，接收父组件传来的onSelectChat方法，当用户点击某个聊天项时，调用该方法并传入对应的用户信息：

// ChatSidebar.jsx
function ChatSidebar({ onSelectChat }) {
  // 模拟聊天列表数据
  const chatRooms = [
    { id: 1, name: '张三', avatar: 'avatar-url-1' },
    { id: 2, name: '李四', avatar: 'avatar-url-2' }
  ];

  return (
    <div className="chat-sidebar">
      {chatRooms.map(room => (
        <div 
          key={room.id}
          className="chat-item"
          onClick={() => onSelectChat(room)} // 点击时调用父组件的方法
        >
          <img src={room.avatar} alt={room.name} />
          <span>{room.name}</span>
        </div>
      ))}
    </div>
  );
}

export default ChatSidebar;

3. SelectedChat组件接收并使用选中信息 #

在SelectedChat中，接收父组件传来的currentUser，根据这个信息渲染对应的聊天界面：

// SelectedChat.jsx
function SelectedChat({ currentUser }) {
  // 如果没有选中用户，显示提示
  if (!currentUser) {
    return <div className="selected-chat">请选择一个聊天对象</div>;
  }

  // 选中用户后，渲染聊天内容
  return (
    <div className="selected-chat">
      <div className="chat-header">
        <img src={currentUser.avatar} alt={currentUser.name} />
        <h3>{currentUser.name}</h3>
      </div>
      <div className="chat-messages">
        {/* 这里渲染该用户的聊天记录 */}
      </div>
      <div className="chat-input">
        {/* 聊天输入框 */}
      </div>
    </div>
  );
}

export default SelectedChat;

这种方式是React中处理同级组件通信的标准方案，通过父组件作为中间层传递状态和回调，保证了数据流向的清晰可控。

内容的提问来源于stack exchange，提问作者User