Javascript 反应渲染一行中的多个组件

我正在构建一个小的聊天应用程序，它具有以下HTML结构

<div className="my-message">
  <div className="mess">
    <p className="my-message">Hello</p>
  </div>
  <div className="mess">
    <p className="my-message">How are you</p>
  </div>
    <p className="time-i-sent">1m ago</p>
</div>

<div className="my-message other-message">
  <div className="mess">
    <p className="my-message other-message-2">Hi</p>
  </div>
  <div className="mess">
    <p className="my-message other-message-2">Great</p>
  </div>
    <p className="time-i-sent other-message-3">5m ago</p>
</div>

这是我的

Message

组件，如果它们连续来自同一个用户，则应该由

Messages

组件包装

const Message = (props: any) => (
  <div className="mess">
    {props.userId === props.currentUser.id ? (
      <p className="my-message">{props.text}</p>
    ) : (
      <p className="my-message other-message-2">{props.text}</p>
    )}
  </div>
);

我认为这应该是逻辑，但不确定如何在这里添加我想到的HOC组件。

当您想要减少

消息的元素数量时，可以尝试使用
数组将具有相同
用户ID的消息分组。reduce
：

const groups=消息。reduce（（acc、消息、索引）=>{
if（index>0&&messages[index-1].userId==message.userId）{
//和以前一样
acc[acc.length-1].push（{message，index}）；
}否则{
//新组
acc.push（[{消息，索引}]）
}
}, []);
返回组.map（（组，组索引）=>(
{group.map（{message，index}）=>(
))
}
)
);

但是我认为最好修改
Messages
组件，这样它就可以接受一个消息数组，而不是使用
子元素
为什么要将消息和消息作为单独的组件？消息是否有唯一的时间？您能解释一下，你什么时候需要显示时间？我正试图理解你的解决方案。首先，我认为我们应该改变
组
方法，
消息
使用
当前
参数。我没有提到，但我使用了TypeScript，我想问一下，在
组中，
我们将从
消息
变量中为每个返回一个消息对象，对吗？
首先，我想我们应该更改组中的方法，使用当前参数的消息
您是对的。修正。这里，
groups
是一个消息数组，按
userId
分组，并保持每条消息的原始时间顺序。谢谢，它按预期工作！我有一个问题，当我发送多条消息时，我是否应该重用这种方法？据我所知，这对获取我们已有的所有信息都有效。如果这是两个用户之间的实时聊天，会是一样的吗？
我应该重用这种方法吗？
您只有一组保存在状态/道具中的消息。每当一个新元素被添加到它（它将是一个新数组）中时，reduce应该被重新执行。您可以尝试对长对话进行某种优化，但这超出了本问题的范围。
const Message = (props: any) => (
  <div className="mess">
    {props.userId === props.currentUser.id ? (
      <p className="my-message">{props.text}</p>
    ) : (
      <p className="my-message other-message-2">{props.text}</p>
    )}
  </div>
);

messages.map((message, index) => {
  if (index > 0 && messages[index - 1].userId === message.userId) {
     return (
       <Messages
         {...message}
         currentUser={currentUser}
         lastMessage={index === messages.length - 1}
       >
          <Message key={index} {...message} currentUser={currentUser} />
       </Messages>
    );
  } else {
    return (
       <Message key={index} {...message} currentUser={currentUser} />
    );
  }
})

<Messages>
  <Message>Hi</Message>
  <Message>How are you</Message>
</Messages>
                                     <Messages>
                                       <Message>Hi</Message>
                                       <Message>Great, you?</Message>
                                     </Messages>
<Messages>
  <Message>Awesome</Message>
</Messages>
                                     <Messages>
                                       <Message>Bye</Message>
                                     </Messages>