我創建了一個聊天。我已經發送和接收訊息。左側（紅色是我收到的訊息），右側是我發送的訊息（青色）。但是，這些訊息并沒有按照它們應有的順序排列。如何根據接收和發送的時間和訊息使用 css 規則設定聊天訊息？訊息順序應如附圖所示。訊息Ok. And you?。應該在黑色（3）標記的地方，它在前。
//聊天用戶.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>
</>
);
};
//聊天.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%;
}
uj5u.com熱心網友回復：
您不能僅通過 css 的物件值對陣列進行排序，而必須在映射之前使用 js 對其進行排序。
array.sort(function(a,b){
var c = new Date(a.date);
var d = new Date(b.date);
return c-d;
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400624.html
上一篇：浮動標簽不能與not(:placeholder-shown)一起正常作業
下一篇：單擊不同專案時切換展開/折疊箭頭