django React使其他用户的消息显示不同的颜色

wydwbb8l 于 2023-10-21 发布在 Go

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

我正在做一个聊天应用程序与django渠道和React，我希望来自不同用户的消息以不同的颜色显示。
要创建消息，我将它们保存在状态

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

function theone(e) {

        
        e.preventDefault()
        chatSocket.send(JSON.stringify({
            'message': myInput
        })); 
        
        setMyInput2('')

<form onSubmit={theone} className="myForm">
       <input onChange={isChanging} placeholder="Message..." type="text" value={myInput} />
 </form>

对于每个消息的className，它是当前用户的用户名。我基本上想做这样的事情。

{currentUser.username} {
    background:'red'
}

如果没有，就会出现不同的颜色。
我怎么能让它工作。

django

来源：https://stackoverflow.com/questions/77236630/react-make-messages-of-other-user-appear-different-color

1条答案

按热度按时间

uajslkp61#

您应该在将消息发送到chatSocket时包含发件人。理想情况下，这应该由后端注入，否则您的API可能会被利用。但这看起来像一个游戏组应用程序，所以这里有一个简单的解决方案。

chatSocket.send(JSON.stringify({
    'message': myInput,
    'sentBy': currentUser //assuming currentUser is a string describing username of current user
  }));

然后在onmessage中，使用

setMessages(old => [...old, data])

最后将messages渲染如下：

messages.map(({message, sentBy}, idx) => (
    <p key={idx} className={sentBy === currentUser ? 'currentUser' : 'otherUser'}> 
      {message}
    </p>
  ))

使用css来区分消息-

.currentUser {
  background: 'red';
 }

 
 .otherUser {
  background: 'yellow';
 }

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

我来回答

django React使其他用户的消息显示不同的颜色

1条答案

相关问题

热门标签

最新问答