gpt4 book ai didi

reactjs - 在大型列表上,react-virtualized 与 WindowScroller 和 AutoSizer 结合不会呈现所有项目

转载 作者:行者123 更新时间:2023-12-03 14:07:28 40 4
gpt4 key购买 nike

我有一个包含 300 多个项目的大列表。为了获得更好的性能,我想使用 react 虚拟化并仅渲染屏幕上当前可见的项目。出于设计原因,我必须使用 WindowScroller,并且根据屏幕尺寸,列表具有不同的宽度。

因此我使用 WindowScroller 和 Autosizer。我可以向下滚动 70 个项目的整个列表,但在 30 个列表项目(在我开始滚动之前就已经存在)后它会停止渲染。渲染的项目数量取决于可见空间(通过codesandbox.io 打开和关闭的控制台进行检查)。

我认为我的使用有误,但我不知道我做错了什么。

完整示例:https://codesandbox.io/s/64lzm266n

我在 stackoverflow 和 React-virtualized 的问题页面上进行了搜索,但没有找到解决方案。我希望有人能帮助我。

最佳答案

我在该项目的 GitHub 问题 ( https://github.com/bvaughn/react-virtualized/issues/1216 ) 中提出了一个解决方案。

我没有添加style参数,也没有把WindowScroller中的scrollTop给List组件。您可以在 https://codesandbox.io/s/7yzzw92xw1 查看修复版本

感谢阿纳戈尔斯基

关于reactjs - 在大型列表上,react-virtualized 与 WindowScroller 和 AutoSizer 结合不会呈现所有项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52367022/

40 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com