问题标签 [react-window]

我有 2 个并排的可滚动元素（来自 react-window），它们是“同步的”：滚动一个也会使另一个滚动。

我想隐藏左侧元素的垂直滚动条，以便它们显示为一个单独的元素，如表格。并让滚动条从右边的元素显示出来。

这是一个示例： https ://codesandbox.io/s/focused-fire-4j5ro

我不能使用 ::-webkit-scrollbar 因为它还隐藏了我需要保留的水平滚动条。

我尝试了这个技巧：隐藏滚动条，但仍然可以滚动，但它似乎不适用于 react-window。

有人对这个用例有想法吗？

谢谢 ！

我有一个包含相当大列表的 React 项目。它已经到了对性能产生不利影响的地步，我决定使用react-window虚拟化它们。转换很简单，但我遇到了一个问题，即对列表项的任何更改（列表大小、项属性更改、任何内容……）总是会导致所有列表项重新安装（而不仅仅是重新渲染）。

由于应用程序很大，我没有时间将其分解为可重现的案例，但我做了以下观察：

• 所有列表项都有一个key，这是通过 React 开发者工具验证的。
• 当列表中的项目发生变化时，所有项目都keys保持不变。
• 当使用普通map渲染列表项时，它们不会在任何更改时重新安装。
• 当react-window与完全相同的列表项一起使用时，它们都会在任何更改时重新安装。
• 父 List 组件不会在更改时重新安装（仅重新渲染）。

这使我相信是 react-window 导致了重新安装，但是在线的所有示例都没有表现出这种行为。在似乎确实如此的报告问题中，通常得出的结论是开发人员没有key为他们的项目提供一个，或者使用key不正确。

当提出这样的问题时，人们通常倾向于回答他们需要停止使用匿名函数作为他们的项目、使用 React.memo、实现 componentDidUpdate 等的答案......但这不是我的问题米处理。我可以控制组件重新渲染。事实是这些物品都在重新安装，即使它们都有钥匙并且钥匙没有改变。

由于我没有要提供的代码片段，我的主要问题是：什么情况下可能会导致 React 重新挂载始终保留相同键的列表项？

react-virtualized（MultiGrid组件）repo中有一个可用的prop fixedRowCount，它是否存在于virtualized的重写中，现在称为react-window？

谢谢！

我想创建虚拟化列表。我有 100 000 个项目，但只会呈现 20 个项目（取决于窗口高度）。当用户滚动时，不会添加新项目，它只会将道具更改为那些不在屏幕上的道具。所以用户看到仍然正确的项目。

我正在使用react-window库作为react-virtualized的替代方案：

在这种情况下，根div是全屏可滚动元素并且List是 300px 高度也是可滚动元素。要从中删除滚动，List我必须根据项目数设置高度List：

现在滚动很好（可滚动只是 root div），但是List一次渲染所有 100 000 个项目，因为它们适合List. 有什么方法可以List使用自定义滚动元素（或窗口），就像在这个反应虚拟化示例中一样，WindowsScroller或者我必须使用react-virtualized？

我想在滚动时进行行虚拟化（以便在滚动时显示数据）

但是在滚动时，现在出现了可怕的故障

告诉我是什么问题？

项目 -男性-wind.surge.sh

带有表格的组件（此处使用了 react-window）：

我尝试使用这个解决方案，但它没有帮助 - https://github.com/bvaughn/react-virtualized/issues/1327

我正在使用 React Virtualized 来打开我的项目列表，它具有以下功能 1）单击任何项​​目，用户将被提示一个详细信息面板，他将能够在其中更新项目的详细信息。而当他返回列表时，他将能够在列表中的项目单元格中看到详细信息。他可以添加很多细节以使其更大或通过删除细节来减小尺寸

2) 他可以删除该项目，或者在列表中添加具有某些详细信息或没有详细信息的另一个项目。

CellMeasurer 满足我的要求，因为支持动态高度。但我有以下问题

1）最初当我的列表第一次安装时，前几个项目被测量并正确显示，但是一旦我滚动到最后，项目就会相互重叠。（定位不正确，我猜 defaultHeight 正在应用到未测量的细胞）。再次重新呈现列表后，这将正常工作。2）此外，当我更新项目的详细信息时，列表不会随着新的高度调整而更新

我确信我的实现在某个地方是不正确的，但我花了很多时间来敲定它。请让我知道在这里可以做些什么来解决这个问题

此外，我在其 componentDidUpdate 中手动触发对我的项目的重新测量，如下所示（）

在主父项中，每次列表更新并触发 forceupdate 时，我都会重新计算列表的高度，如下所示

我使用 styled-components 进行媒体查询。但是对于 react-window 组件，我不知道该怎么做，因为 react-window 需要使用 props 来设置 ColumnCount, ColumnWidth...

我正在制作一个基于 react-table v7 和 react-window 的表格。我在这个网站上发现了同样的问题，但几乎他们使用的是 v6 - 几乎不同。

问题是我们输入后过滤器文本字段会失去焦点，即使我们只是触摸输入（我知道表格正在重新渲染）。但是我几天都找不到任何解决方案。

请帮忙，非常感谢。

这是代码沙箱

有人尝试过将 Ant Design Table 与 react-window 一起使用来提高性能吗？我遇到的问题是如何计算 rowHeight 并将其提供给 react-window。我们的表格支持调整列大小，因此 rowHeight 是动态的。

这是我的问题。

我正在使用 react-window 来渲染大表。每行都有自己的本地状态。删除一行后，下一行向上移动并获得已删除行的状态（这就是它在我的应用程序中的外观）。

有解决此问题的方法吗？我可以使用 react-window 为每一行设置本地状态吗？

代码框示例| gif 它是如何工作的