当前位置：首页 > React

react实现聊天界面

2026-01-27 13:54:28React

React 实现聊天界面的核心步骤

搭建基础结构
创建 React 项目后，构建聊天界面的基本框架。通常包括消息列表、输入框和发送按钮。使用 useState 管理消息状态，初始化一个空数组存储消息历史。

import React, { useState } from 'react';

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');

  return (
    <div className="chat-container">
      <div className="message-list">
        {messages.map((msg, index) => (
          <div key={index} className="message">{msg.text}</div>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

处理消息发送逻辑
实现发送函数，将用户输入添加到消息列表并清空输入框。添加时间戳或用户标识区分消息来源。

const handleSend = () => {
  if (inputValue.trim()) {
    setMessages([...messages, { text: inputValue, sender: 'user' }]);
    setInputValue('');
  }
};

模拟消息接收
通过 useEffect 模拟自动回复或对接真实 API。定时器模拟异步响应，展示机器人回复效果。

useEffect(() => {
  if (messages.length > 0 && messages[messages.length - 1].sender === 'user') {
    setTimeout(() => {
      setMessages(prev => [...prev, { text: 'Hello! This is a reply.', sender: 'bot' }]);
    }, 1000);
  }
}, [messages]);

优化界面样式
根据消息来源调整样式，区分用户和机器人消息。使用 CSS 或库如 Material-UI 美化界面。

.message {
  padding: 8px;
  margin: 4px;
  border-radius: 4px;
  max-width: 70%;
}

.message.user {
  align-self: flex-end;
  background-color: #007bff;
  color: white;
}

.message.bot {
  align-self: flex-start;
  background-color: #f1f1f1;
}

添加滚动至底部功能
消息列表更新后自动滚动到最新内容。通过 useRef 获取容器引用并操作滚动位置。

const messagesEndRef = useRef(null);

useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);

return (
  <div className="message-list">
    {messages.map((msg, index) => (
      <div key={index} className={`message ${msg.sender}`}>{msg.text}</div>
    ))}
    <div ref={messagesEndRef} />
  </div>
);

扩展功能建议