使用react-infinite-scroll-component实现bubble.list的向上滚动加载

[liulangdelimao]

重现步骤

在线示例链接：（必填）

步骤：
1.使用InfiniteScroll将Bubble.List包裹，设置inverse={true}
2.bubble.list增加样式display: "flex", flexDirection: "column-reverse" 对文本进行反转

当前行为

反转后 在发送请求后 发送的内容和回复都会在最上面渲染
如果不反转的话 因为他是流加载，加载更多的时候就会将内容往下挤 无法计算滚动的高度进行回复

预期行为

加载更多时 内容向上加载

上下文

消息记录向上滚动加载更多

版本

1.0.6

您在哪些浏览器上遇到了这个问题？

No response

[petercat-assistant]

您在使用 react-infinite-scroll-component 实现 bubble.list 的向上滚动加载时遇到了问题。根据您描述的情况，您希望在加载更多内容时，内容能够向上加载，而不是在顶部渲染新内容。

可能的解决方案：

1. 检查 react-infinite-scroll-component 的设置：

   • 确保 inverse 属性设置为 true，这将使得滚动方向反转。
   • 确保 dataLength 属性正确更新，以便组件知道何时加载更多内容。

2. 调整样式：

   • 您已经设置了 display: "flex" 和 flexDirection: "column-reverse"，这通常是正确的做法以实现反转显示。
   • 确保容器的高度和溢出设置正确，例如 overflow: "auto"，以便滚动正常工作。

3. 处理滚动位置：

   • 在加载更多内容后，您可能需要手动调整滚动条的位置，以确保新加载的内容在视图中。例如，可以使用 scrollTo 方法将滚动条位置调整到合适的位置。

4. 检查数据加载逻辑：

   • 确保数据加载逻辑正确实现，并且在加载新数据后，组件状态正确更新。

如果这些建议没有解决您的问题，您可以提供更多的代码细节或在线示例链接，以便我能更好地帮助您。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[liulangdelimao]

因为他是流加载的 我无法一次性获取他加载更多后的高度 所以计算的时候每次都会置底`import React, { useState, useEffect, useRef } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Bubble } from "ant-design-x";

const ChatComponent = () => {
const [messages, setMessages] = useState(() =>
Array.from({ length: 20 }, (_, i) => ({
id: i + 1,
content: 消息 ${i + 1},
position: i % 2 === 0 ? "left" : "right",
}))
);
const [hasMore, setHasMore] = useState(true);
const scrollableRef = useRef(null);
const prevScrollTop = useRef(0);

// 监听 Bubble.List 渲染完成
useEffect(() => {
if (!scrollableRef.current) return;

const observer = new MutationObserver(() => {
  if (scrollableRef.current) {
    scrollableRef.current.scrollTop =
      scrollableRef.current.scrollHeight - prevScrollTop.current;
  }
});

observer.observe(scrollableRef.current, { childList: true, subtree: true });

return () => observer.disconnect();

}, []);

// 加载更多数据
const loadMoreMessages = () => {
if (messages.length >= 100) {
setHasMore(false);
return;
}

if (scrollableRef.current) {
  prevScrollTop.current = scrollableRef.current.scrollHeight;
}

setTimeout(() => {
  const newMessages = Array.from({ length: 10 }, (_, i) => ({
    id: messages.length + i + 1,
    content: `历史消息 ${messages.length + i + 1}`,
    position: (messages.length + i) % 2 === 0 ? "left" : "right",
  }));

  setMessages((prev) => [...newMessages, ...prev]);
}, 1000);

};

return (
<div
id="scrollableDiv"
ref={scrollableRef}
style={{
height: "500px",
overflow: "auto",
display: "flex",
flexDirection: "column",
border: "1px solid #ddd",
}}
>
<InfiniteScroll
dataLength={messages.length}
next={loadMoreMessages}
hasMore={hasMore}
loader={<p style={{ textAlign: "center" }}>加载中...

}
endMessage={<p style={{ textAlign: "center" }}>没有更多消息了

}
scrollableTarget="scrollableDiv"
inverse={false}
>
<Bubble.List>
{messages.map((msg) => (

{msg.content}

))}
</Bubble.List>


);
};

export default ChatComponent;
`
然后在初始化和加载更多时我可以处理好数据 但是发送新的内容的时候 我无法处理 除非修改源码

[kimteayon]

您好请提供一个https://codesandbox.io/p/sandbox/ant-design-x-box-vmqvt8 来描述您的问题

[kimteayon]

从你的描述来看 数据在准备好之后 数据同时需要 reverse一下