问题标签 [react-window]

我尝试将 react-windowfixedSizeGrid与react-infinite-loader. 如前所述，infinite-loader 不支持用于无限加载的 fixedSizeGrid。所以我找到了onItemsRendered覆盖方法。现在我正在尝试用它渲染数据并加载到滚动条上。但是当我滚动时我的数据没有加载。这是ThumbGrid我传递数据和 fetchMore(graphql) 的组件的片段，即来自父组件的数据的总大小。谁能帮我解决这个问题。：

这是我的父组件：

我有一个使用react-window、infinite loader和auto sizer的固定列表和网格。它工作正常，但我希望在列表/网格开始之前附加一个组件（例如，一个搜索框和一个按钮）。实现此目的的正确方法是什么？我希望这个组件与固定列表一起滚动，而不是单独滚动。我之前已经厌倦了渲染组件，但是它不在固定列表容器中并且不会随它滚动。

编辑：我几乎不希望列表（或网格）和实际页面是两个不同的滚动容器。我希望整个页面一起滚动。我遇到了这个问题，因为我的一些容器需要有一个无限的项目列表，用户可以滚动浏览，因此需要对列表进行虚拟化以提高性能。

在此处查看演示。确实，固定容器应该被视为整个页面和搜索框，其他所有内容都应该随着无限列表滚动。拥有两个不同的滚动容器对于 ux 来说并不是太好。

当使用TextField 组件作为Select具有大型数据集（1000 项）的字段时，挂载/卸载列表时会出现明显的延迟。

正如文档中所建议的那样，我正在使用react-window有效地呈现大列表，但结果 - 我失去了能够选择列表项的功能。

我希望当我选择一个项目时，值会更新。

在 react-window 的列表实现中，不会为水平滚动条触发 OnScroll 事件。

最小复制位于 - https://codesandbox.io/s/summer-https-dyhvu

在给定的示例中，我们可以看到对于本机实现，水平和垂直滚动事件都被触发（检查控制台）

在列表的 react-window 实现中，仅触发垂直（虚拟化）滚动事件，而不触发水平滚动事件。

有没有办法为垂直虚拟化列表触发水平滚动事件？

我有数千个对象的数组，比如

我想显示一个表格，其中每个人对象都是一行，但是它们太多了，并且它们的score字段每隔几秒钟更新一次，这会使用户的机器陷入困境。

这似乎是尝试 react-window 的绝佳机会。只是说这些对象中的 20 个会在任何时候出现在屏幕上，所以我现在只显示并重新渲染那些在视口中的对象。

但我就是无法理解 react-window 示例或文档。这是它为固定大小的网格提供的示例：

渲染它的子元素的方式发生了某种魔法，FixedSizeGrid但我不知道它是什么，也不知道如何Cell用我自己的组件替换。style,columnIndex和rowIndexprops 是从哪里来的？我正在阅读源代码，但无法弄清楚。任何地方都没有提到您可以将数组/集合提供给 react-window 组件之一，那么如何将数组映射到一个？我能看到的唯一方法是索引到我的people数组，但这感觉......错了？例如，这不会导致排序变得非常昂贵吗？

我正在关注这个反应表的虚拟化行示例。我知道这段代码正在使用 react 和 react table 最新版本。如何使用react-window我的反应表版本 6.10.0 和反应版本为 16.2.0 的包？另外，我正在从后端加载数据块，例如，前 500 条记录，然后是接下来的 500 条记录，依此类推，但反应表对具有前 500 条记录的用户可见，并且在此数据保持追加后，在此案例，react-windowFixedSizeList函数有用还是VariableSizeList有用？

渲染 React 表的代码：

渲染列的功能：

一些代码片段确实会有所帮助。

我在官方react-table 沙箱中关注这个例子。当我滚动时，行在示例中闪烁，当您在线阅读时，他们建议添加style到 div，即https://github.com/bvaughn/react-virtualized/issues/1327。但是作者已经添加了样式：

但是行仍然在闪烁。有谁知道如何解决这个闪烁的问题？此致

我正在尝试使用 react-window-infinite-loader 在 material-ui 自动完成下拉列表中显示无限滚动列表。当我滚动到列表底部时，我想从服务器获取下一页项目。我创建了一个代码沙盒示例，它结合了用于虚拟化列表的 material-ui Autocomplete 示例和react-window-infinite-loader 示例。当我滚动到列表底部时，会加载下一页数据，但是某些原因导致列表滚动回顶部。加载新数据后如何保持滚动位置？

谢谢！

我一直在 Electron (Chrome) 和 React 中实现一个聊天客户端。我们的首要任务是速度。因此，我们应该使用虚拟化列表组件（也称为“缓冲渲染”或“窗口渲染”）。我们已经探索了 react-virtualized、react-window 和 react-infinite 等。

所有这些组件的一个共同问题是，如果支持可变高度的列表元素，则需要提前知道高度。现在，有些聊天很长，有些很短，这对我们来说是一个挑战。（由于 EXIF 数据和 ffprobe，图像和视频很容易）。

因此，我们面临着测量高度的挑战，同时还要努力提高性能。一种明显的技术是将元素放在浏览器容器的视口外，执行测量，然后渲染列表。但这在性能要求方面伤害了我们。像 react-virtualized/CellMeasurer （不再由原作者维护）和 react-window 等软件使我们使用了这种技术，内置在库中，但性能有点慢而且不可靠。一个可能更高效的类似想法是使用背景电子浏览器窗口进行渲染和测量，但我的直觉是不会那么快。

我认为必须有一些解决方法来提前计算字符串高度，根据自动换行、最大宽度和字体规则。

我目前的想法是使用像string-pixel-width这样的库，以便在我们通过 API 获取文本数据后立即计算行高。基本上，该库使用这段代码来生成字符宽度 [*] 的映射。然后，一旦我们知道每个文本有多宽，我们就会在计算出的最大行宽达到最大值时将每一行分开，最后通过行数推断列表元素的高度。由于断词，这将需要一些算法摆弄，但有一些库可以帮助解决这个问题 - css-line-break似乎很有希望。

[*] 我们将不得不稍微修改它以考虑所有 Unicode 字符范围，但这是微不足道的。

我尚未完全探索的一些选项包括 python weasyprint 项目和 facebook-yoga 项目。我对你的想法持开放态度！

我正在使用react-window构建一个无限加载的用户列表。在列表中，每个项目都有一个来自 Material-UI的图标按钮，用于进一步操作。但是我无法在图标附近安装菜单，因为在设置anchorEl要打开的菜单时会重新渲染图标按钮。一个gif剪辑：

该问题与React Material-UI 菜单锚点有关，被 react-window list 破坏，但具有更多 HOC。代码在此处列出。我希望我可以使用我的代码框进行演示，但react-measure高度不断增长。

据我了解，涟漪效应会在第一次单击时触发框中的重新渲染。此外，点击后重新渲染后的第二次点击不会触发重新渲染。这对我来说感觉更奇特。

编辑：我修复了第一个沙箱。并且通过使用 Material UI 的列表，这个问题是可以重现的。https://codesandbox.io/s/blissful-butterfly-qn3g7 所以问题在于使用innerElementType属性。