react.js 在按钮单击时触发另一个组件内的事件

Question

我正在使用 react 构建我的第一个网络应用程序。它与多个聊天室聊天。这是我在视觉上得到的：

现在我只想在任何房间上单击“打开”，然后在右侧的白色 div 内显示该聊天室中的消息，当前显示“HI MOM”。

但这两个是不同的组件。

这是聊天室列表：

export default function ChatRoomList({param1}) {
    const [chatRooms, setChatRooms] = React.useState([]);
    React.useEffect(()=>{
      (async () => {
          var x = await getChatRoom(param1)
          console.log(x)
          setChatRooms(x)
      })()
    },[])  
  
      return  (
          <div className='chatRoomView'>
               {chatRooms.map((chatRoom , index) => {
                  return (
                      <ul >
                        <li key={index}>
                            <table>
                                <tr>
                                    <td>
                                        ChatroomID: {chatRoom.chatIDFromTableChats}
                                        <br></br>
                                        Username:  {chatRoom.userNameUser2}
                                    </td>
                                    <td>
                                        <Button variant="contained" onClick={() => loadChatRoomFromID(chatRoom.chatIDFromTableChats)}>open</Button>
                                    </td>
                                </tr>
                            </table>
                        </li>
                      </ul>                   
                  )             
               })}
          </div>
      );
    }
  
    function loadChatRoomFromID(ID) {
       alert(`chatRoomID: ${ID}`);
    }

点击按钮后，我目前只能打开一个警报，显示被点击元素的 ID。

这是第二部分：

export default function ChatMessages() {

function loadMessages(ID){
    // HELP NEEDED?!
}

    return  <div class='mainChatView'>HI MOM</div>;
      
}

如您所见，有一个名为“loadMessages()”的函数，但它没有做任何事情，因为它需要传递 ID 参数，然后开始加载每个房间的消息。

从一个组件到另一个组件的连接丢失了，到目前为止，我读到的任何答案都没有让我悲惨地失败......

谁能给我一个工作代码示例并解释发生了什么？

谢谢！

Answer 1

在 React 中，数据只能通过 props 从父级传递给子级（有关详细信息，请参阅末尾的注释），而不是从兄弟姐妹传递给兄弟姐妹。然而，这并不意味着兄弟姐妹不能导致彼此更新，这只是意味着您需要稍微重构代码，以便数据正确地向下流动。

您可以将活动聊天室 ID 存储在列表和详细视图的父级中，并让列表视图更新 ID，而详细视图使用该 ID 加载消息。

这是一个简单的例子：

function Chat() {
    const [activeRoomID, setActiveRoomID] = React.useState(null);

    const onActiveChange = React.useCallback((id) => {
        setActiveRoomID(id);
    }, []);
    
    return (
        <div>
            <ChatRoomList onActiveChange={onActiveChange}/>
            <ChatMessages id={activeRoomID}/>
        </div>
    )
}

function ChatRoomList({ onActiveChange }) {
    // ...

    return (
        <div>
            {chatRooms.map(chatRoom => (
                <div key={chatRoom.chatIDFromTableChats}>
                    <div>ChatroomID: {chatRoom.chatIDFromTableChats}</div>
                    <Button onClick={() => onActiveChange(chatRoom.chatIDFromTableChats)}>Open</Button>
                </div>
            ))}
        </div>
    )
}

function ChatMessages({ id }) {
    // load messages for `id` and display
}

请注意，数据仅从<Chat> 组件向下流向其子组件。

关于仅从父级流向子级的数据的注意事项：此语句还有其他复杂性。正如这个例子所示，孩子也可以将数据传递给他们的父母，但只能使用通过 props 提供的回调函数，所以 React 特定的部分仍然只允许数据向下流动。此外，上下文 API 允许将数据传递给深层后代（不仅仅是子代）。