如何映射对象数组并更改样式？

debugcn 发表于 Dev

有趣的小丑

我有消息数组，我现在正在使用map()每条消息都有 2 个键，一个是author，另一个是message。因此，当显示最后一条消息时，我想更改该 div 标签的样式，我该怎么做？因此，在映射消息数组时，如果数组元素是最后一个元素，则添加具有更改样式的 div（此处更改的样式意味着该 div 标签上的某些阴影或背景焦点）我该怎么做？

代码：

 <div id="messages" className="card-block">
                            {this.state.messages.map((message, index) => {

                                if(message.author === this.props.match.params.user){
                                    return (
                                        <div key={index} className="msgBoxRight"><p className="msgTextRight">{message.message}</p></div>
                                    )
                                }else{
                                    return (
                                        <div key={index} className="msgBoxLeft"><p className="msgTextLeft">{message.message}</p></div>
                                    ) 
                                }  
                            })}
                        </div>

聊天应用截图：

所以我希望最新消息，即聊天框中的最后一条消息具有不同的样式，可能是背景焦点或框阴影，我该怎么做？

马赫斯116

只需使用 css 选择器:last-child：

.block .message {
  background-color: #ff0000
}

.block .message:last-child {
  background-color: #00ff00
}

<div class="block"> 
  <div class="message">message </div>
  <div class="message">message </div>
  <div class="message">message </div>
  <div class="message">last message</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。