设置聊天消息的顺序答案

【问题标题】：Set the order of messages in the chat设置聊天消息的顺序
【发布时间】：2022-01-01 19:05:53
【问题描述】：

我创建了一个聊天。我已发送和接收消息。左侧（红色是我收到的消息），右侧是我发送的消息（青色）。但是，这些消息不是按应有的顺序排列的。如何根据时间和接收和发送的消息使用 css 规则设置聊天消息？消息的顺序应如附图所示。消息Ok. And you?。应该在用黑色标记的地方（3），它是第一位的。

//ChatUser.js

import React, { useState, useRef} from 'react';
import './Chat.css';
   
const ChatUser = () => {
 

  const [values, setValues] = useState({
    messages: [
     {
      _id: '610be2c',
      text: 'Hello. How are you???',
      sender: '6003123',
      receiver: '608ffae',
      createdAt: '2021-12-26T17:58:00.876+00:00'
    },
    {
     _id: '610be2d',
     text: '???',
     sender: '6003123',
     receiver: '608ffae',
     createdAt: '2021-12-26T17:58:10.494+00:00'
   },
   {
    _id: '610be2d890',
    text: "Ok. and you?",
    sender: '608ffae',
    receiver: '6003123',
    createdAt: '2021-12-26T17:58:10.494+00:00'
   },
  {
   _id: '610be2dtyu',
   text: "Tell me!!!",
   sender: '6003123',
   receiver: '608ffae',
   createdAt: '2022-01-01T18:02:36.766+00:00'
 }
]

});

  return (
    <>  
        <ul className="containerMessages">
            {messages && messages.length > 0 ? messages.map( message => {
                return <li className = {message.sender == "600" ? 'left' : 'right'} key={message['_id']}>
                        {message.text}
                    </li>;
            }) : null}
        </ul>
        <div>
           
                <Button type="primary" htmlType="submit">
                    Send
                </Button>
          
        </div>
    </>
  );
};

//Chat.css

  .containerMessages {
    padding: 0;
    display: flex;
    
    /* column reverse to have chat-style message ordering*/
    flex-direction: column-reverse;
    list-style-type: none;
  }
  
  .left {
    background: cyan;
    
    /* use align-self */
    align-self: flex-end;
    border: 1px solid gray;
    border-radius: 5px;
    margin: 7px;
    margin-left: 0;
    padding: 5px;
    width: 60%;
  }

  .right {
    background: pink;
    border: 1px solid gray;
    border-radius: 5px;
    margin: 7px;
    margin-right: 0;
    padding: 5px;
    width: 60%;
  }

【问题讨论】：

标签： css reactjs

【解决方案1】：

您不能仅通过 css 对数组的对象值进行排序，而是必须在映射之前使用 js 对其进行排序。

array.sort(function(a,b){
var c = new Date(a.date);
var d = new Date(b.date);
return c-d;
});

【讨论】：