react实现聊天窗口

React 实现聊天窗口的关键步骤

搭建基础组件结构
创建核心组件：ChatWindow（主容器）、MessageList（消息列表）、MessageInput（输入框）。使用函数式组件结合Hooks管理状态。

状态管理
通过useState维护消息列表和当前输入内容：

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

消息渲染逻辑
在MessageList组件中映射消息数组，区分发送/接收样式：

{messages.map((msg, index) => (
  <div key={index} className={msg.isSent ? 'sent' : 'received'}>
    {msg.text}
  </div>
))}

处理用户输入
为输入框绑定onChange和onSubmit事件：

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

进阶功能实现

自动滚动到底部
使用useRef和useEffect实现消息更新后自动滚动：

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

消息时间戳显示
扩展消息对象包含时间数据：

{
  text: inputValue,
  isSent: true,
  timestamp: new Date().toLocaleTimeString()
}

支持多行输入
将<input>替换为<textarea>并添加样式控制：

textarea {
  min-height: 40px;
  max-height: 120px;
  resize: none;
}

样式优化建议

响应式布局
使用CSS Grid或Flexbox确保窗口适应不同屏幕尺寸：

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

消息气泡样式
为发送/接收消息添加差异化样式：

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

动画效果
通过CSS Transition增强交互体验：

.message {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
}
.message.show {
  opacity: 1;
  transform: translateY(0);
}