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

Question

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

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

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

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

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

Answer 1

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

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

感谢阿纳戈尔斯基