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

Question

我有消息数组，我正在使用 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> 

聊天应用截图:

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

Answer 1

只需使用 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>