django React聊天应用消息没有不同的className

t2a7ltrp 于 2023-10-21 发布在 Go

关注(0)|答案(1)|浏览(109)

我正在做一个聊天应用程序与django渠道和React。保存状态中的消息。当一个新的消息是，我希望它有当前用户的className。
问题是，所有消息都有用户阅读它们的className，即使它们是从其他用户写入的。例如，我从两个不同的浏览器发送消息。一个记录为first，另一个记录为second。如果第一次发送消息，它将显示为className first。但对于second，此消息将显示为className second

chatSocket.onmessage = function(e) {
     if (ran == true) {
       const data = JSON.parse(e.data);
       setMessages(old => [...old, <p ref={oneRef} id={currentUser[0]?.username} className={currentUser[0]?.username}>{data.message}</p>])
                
    }
}

我能做些什么来解决这个问题。

django

来源：https://stackoverflow.com/questions/77239197/react-chat-app-messages-dont-have-different-classname

1条答案

按热度按时间

pzfprimi1#

不要使用currentUser，而是使用负载附带的用户名（假设它可用）：
此外，我会避免滥用className，并使用数据属性，即。data-username代替。

chatSocket.onmessage = function(e) {
  if (ran == true) {
    const data = JSON.parse(e.data);
    setMessages(old => [
      ...old,
      <p
        ref={oneRef}
        data-username={data.username}
      >
        {data.message}
      </p>
    ])
  }
};

如果需要在CSS中添加，可以使用：用途：

[data-username="admin"]{
   /* Custom rules for user "admin"... */
}

赞(0）回复(0）举报 2023-10-21

我来回答

django React聊天应用消息没有不同的className

1条答案

相关问题

热门标签

最新问答