React中如何根据消息对象属性为遍历渲染的消息设置不同对齐样式

• 首先在组件内提前读取localStorage存储的邮箱，避免遍历消息时重复读取本地存储，提升渲染效率
• 遍历消息列表时根据你的判断条件动态绑定样式类，分别对应右对齐、左对齐效果
• 补充对应的CSS样式规则即可实现需求

修改后的完整组件代码 #

import { useState, useEffect } from 'react';
import { Container, Row, Col, Button } from '你的UI组件库路径'; // 请替换为你实际的组件导入路径
import MessageService from '你的MessageService路径';
import MessageForm from '你的MessageForm路径';
import UploadFiles from '你的UploadFiles路径';
import './AlignFeature.css'; // 引入样式文件

function AlignFeature(){
  const [allMessages, setAllMessages] = useState([]);
  // 提前读取当前用户邮箱
  const currentUserEmail = localStorage.getItem('email') || '';

  useEffect(()=>{       
    MessageService.getAllMessages().then(res=>{
      setAllMessages(res.data);
    });
  }, []);

  return (
    <Container>
      <Row>
        <Col md={{ span: 6, offset: 0}}>
          <div> 
            <div>
              {/* 注意React事件是驼峰命名，原来的小写onclick不会生效，已修正为onClick */}
              <Button color='warning' onClick={MessageService.deleteChat}> 
                delete chat
              </Button>
            </div> 
            <div className='chat'>
              <div className='sentMes'>
                {
                  allMessages.map(message => {
                    // 按你的要求判断是否需要右对齐
                    const isRight = message.receiverEmail === currentUserEmail;
                    return (
                      <div 
                        key = {message.id}
                        className={`sentMessages ${isRight ? 'align-right' : 'align-left'}`}
                      >
                        <p>{message.message}</p>
                      </div>
                    )
                  })
                } 
              </div>
            </div>
          </div>
          <div style={{position:'static'}}>
            <MessageForm /> 
          </div>
        </div> 
      </Col>
      <Col md={{ span: 3, offset: 0}}> <UploadFiles /></Col>
    </Row>
  </Container>
  );
}
export default AlignFeature;

配套CSS样式（新增到AlignFeature.css文件中） #

/* 对齐核心样式 */
.align-right {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}
.align-left {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0;
}

/* 可选：气泡样式优化聊天效果 */
.align-right p, .align-left p {
  padding: 8px 12px;
  border-radius: 16px;
  max-width: 70%;
  word-break: break-word;
  margin: 0;
}
.align-right p {
  background-color: #1677ff;
  color: #ffffff;
}
.align-left p {
  background-color: #f5f5f5;
  color: #333333;
}

内容的提问来源于stack exchange，提问作者Stanoh