时间戳

首页 > 解决方案 > 如何根据时间显示发送和接收的消息

css - 如何根据时间显示发送和接收的消息

问题描述

如果发送者发送一条消息，它会出现在 ui 的右侧，接收者从 ui 的左侧获取，但是当发送者向接收者发送另一条消息时，它应该显示在底部，但它显示在顶部结尾

我想将消息显示为

 received message
              send message
 received message
              send message

但是在这里我收到了类似的消息

 received message
 received message
 received message
 received message
              send message
              send message
              send message
              send message

这是代码：

        const time = new Date();
        const formattedTime = time.toLocaleString("en-US", { hour: "numeric", minute: "numeric", seconds: "numeric });

       <div className="nano-content pad-all" tabIndex={0} style={{right: '-17px'}}>
              <ul className="list-unstyled media-block">
              <li className="mar-btm" id="media-left">
              {
                receiveMessages.map((receivemessage,key) => {
                return <div>
                <div className="media-left">
                  <img src="https://bootdey.com/img/Content/avatar/avatar1.png" className="img-circle img-sm" alt="Profile Picture" />
                </div>
                <div className="media-body pad-hor">
                  <div className="speech">
                  <p value={key} className="mar-btm">{receivemessage}</p> 
                  <span class="time_date">{formattedTime}</span>
                  </div>
                </div>
                </div>
              })
              }
              </li>
              <li className="mar-btm" id="media-right">             
                {
                  messages.map((message,key) => {
                    return <div>
                  <div className="media-right">
                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" className="img-circle img-sm" alt="Profile Picture" />
                  </div>
                  <div className="media-body pad-hor speech-right mt-2">
                    <div className="speech">  
                    <p value={key} className="mar-btm">{message}</p>  
                    <span class="time_date">{formattedTime}</span>
                    </div>
                </div>
                </div>
                  })
                }       
                </li>
               </ul>
          </div>

请帮助我提前谢谢。

标签： cssreactjs

解决方案

您只是在一个接一个地映射一个数组，因此消息应该像它们一样显示。您需要一个包含一些元数据的更复杂的对象，而不仅仅是一个消息字符串数组：(1) 消息发送的日期。(2) 是谁发送的，当然还有 (3) 消息本身。喜欢：

messsageObj = {
  // always good to add an unique id to use as the `key` property when using .map
  id: 1, 
  message: 'My message',
  createDate: '25/12/2020 22:00:00',
  createUser: 1
}

例如：

// in `mergeMessagesArray` you add all messages to a single list, 
// ordering by the date they were sent
const mergedMessages = mergeMessagesArray(sentMessages, receivedMessages)

return (
  <div>
    {mergedMessages.map(m => (
      // use unique id as key to avoid weird bugs
      <div key={m.id}
        // when mapping the messages array just check the user who created the 
        // message against your current logged in user and render accordingly
        className={m.createUser === currentUser ? 'show-on-right' : 'show-on-left'}>
       {m.message}
      </div>
    )}
  </div>
)

推荐阅读