当前位置：首页 > React

react实现聊天气泡

2026-01-27 18:43:22React

React 实现聊天气泡的方法

基础布局与样式

使用 CSS Flexbox 或 Grid 布局构建气泡容器。发送方和接收方气泡通常采用不同的背景色和对齐方式（右对齐/左对齐）。示例 CSS：

.bubble {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  margin: 5px 0;
}

.sent {
  align-self: flex-end;
  background-color: #0084ff;
  color: white;
}

.received {
  align-self: flex-start;
  background-color: #e5e5ea;
  color: black;
}

动态消息渲染

通过 map 方法遍历消息数组，根据消息类型（发送/接收）应用不同样式类：

{messages.map((msg) => (
  <div 
    key={msg.id}
    className={`bubble ${msg.isSent ? 'sent' : 'received'}`}
  >
    {msg.text}
  </div>
))}

时间戳显示

在气泡底部添加相对时间格式化显示：

<div className="timestamp">
  {new Date(msg.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</div>

配套 CSS：

react实现聊天气泡

.timestamp {
  font-size: 0.7em;
  opacity: 0.8;
  margin-top: 3px;
}

头像集成

使用 Avatar 组件与气泡组合布局：

<div className="message-container">
  {!msg.isSent && <Avatar src={msg.avatar} />}
  <div className={`bubble ${msg.isSent ? 'sent' : 'received'}`}>
    {msg.text}
  </div>
</div>

配套 CSS：

react实现聊天气泡

.message-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

高级功能实现

消息状态指示器：添加已读/未读状态图标

{msg.isSent && (
  <span className="status-icon">
    {msg.read ? <ReadIcon /> : <UnreadIcon />}
  </span>
)

动画效果：使用 CSS transitions 或 Framer Motion

.bubble {
  transition: transform 0.2s, opacity 0.2s;
}

.new-message {
  transform: scale(0.9);
  opacity: 0;
  animation: popIn 0.3s forwards;
}

@keyframes popIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

响应式优化

通过媒体查询调整气泡最大宽度：

@media (max-width: 768px) {
  .bubble {
    max-width: 85%;
  }
}

完整组件示例

function ChatBubble({ messages }) {
  return (
    <div className="chat-container">
      {messages.map((msg) => (
        <div 
          key={msg.id}
          className={`message-container ${msg.isSent ? 'sent' : ''}`}
        >
          {!msg.isSent && <Avatar src={msg.avatar} />}
          <div className={`bubble ${msg.isSent ? 'sent' : 'received'}`}>
            <div className="text">{msg.text}</div>
            <div className="timestamp">
              {formatTime(msg.timestamp)}
              {msg.isSent && <StatusIcon read={msg.read} />}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}