聊天中的聊天记录展示框

1.实现滚动到顶部时可以丝滑的获取数据并且获取到数据渲染到页面后可以恢复滚动的位置

2.实现了消息按时间段分片渲染（具体的时间段分割按自己需求来修改CommentTime函数）

3.如果要给时间分割组件做多语言请结合dayjs来做对应的多语言（修改formatMessageTime函数）

4.真是开发时将获取数据接口换成真实接口，并根据实际数据判断是已经没有更多数据了，以及将组件和函数中的的字段替换成实际接口返回的字段

5.渲染样式根据自己需求来改

6.需要安装的包

npm install react-virtuoso npm install dayjs npm install antd --save //组件库根据自己的需求来安装，也可以安装别的

一、operate.ts(定义的方法)

import { Message } from "."; import dayjs from "dayjs"; // 模拟获取聊天记录(许要替换成调真实接口获取,以及替换函数中的字段) export const generateFakeMessages = ( startId: number, count: number, ): Message[] => { return Array.from({ length: count }, (_, i) => { const id = startId - count + i; const isMe = id % 2 === 0; const date = new Date(Date.now() + i * 1000 * 60); const formattedTime = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`; return { id, text: `这是一条模拟的消息内容，ID为 ${id}。${isMe ? "这是我发送的。" : "这是对方发送的。"}`, sender: isMe ? "me" : "other", timestamp: formattedTime, }; }); }; // 消息分片 export const CommentTime = (messages: any[]) => { let groupedMessages: any[] = []; let currentGroup: any[] = [messages[0]]; for (let i = 0; i < messages.length; i++) { if (messages[i + 1]) { if (