reactjs - 如何仅在最后一条消息上放置聊天消息头像

Question

我正在用 React(准确地说是 Nextjs)制作一个聊天应用程序，到目前为止我已经完成了所有组件:聊天容器、标题、消息列表和输入。该代码正在监听新消息，每条新消息都会在消息列表组件中添加一个新的消息子组件。

这是我想要实现的聊天的示意图版本。每条消息都包含文本本身和人的头像。消息数据还包含作者，因此使用 flex 显示，它将消息放在消息列表的一侧或另一侧。我希望头像仅出现在每一侧的最后一组消息中。

我认为应该是 MessageList 组件负责知道每次哪条消息是每一方的最后一条，但我不确定如何实现它。首先我尝试使用 CSS，但我只能显示在每一侧的最后一条消息中 (:last-child)，但不能显示在每一组的最后一条消息中，每一侧。其次，用一个数组标记每条最后一条消息，但随后我不得不重新排序并搜索前一条消息，这导致头像出现在错误的消息中。此外，为每条消息设置一个状态似乎并不是最佳和高效的。

<ChatContainer>
  <Header />
  <MessagesList >
    <Message author='me' />
    <Message author='me' />    // <- avatar here
    <Message author='them' />
    <Message author='them' />  // <- avatar here
    <Message author='me' />
    <Message author='me' />
    <Message author='me' />    // <- avatar here
  <MessageList />
  <Input />
<ChatContainer />

我的问题是，我如何才能高效且以“reactjs 方式”跟踪每一方每组消息的最后一条消息？

Answer 1

要在每个组中显示头像，只需检查所有消息，如果当前消息作者 !== 下一个消息作者，则将头像 Prop 添加到当前

Also, having a state for each message doesn't seem optimal andefficient.

为此我需要查看您的代码，您可以创建不同的问题(对于其他人，当他们会这样搜索时)并在此处粘贴链接