问题标签 [react-window]

I'm trying to display a navbar on top of react window list. I'm using react-window and react-virtualized-auto-sizer. The problem is that when I add the navbar outside the AutoSizer it creates another scroll bar. sandbox. How could I position the navbar ontop of the list without another scroll bar being created?

Code:

我的 React 实时聊天应用程序（应用程序看起来像 facebook - messenger facebook.com/messages）。 MessageItem可以是视频、贴纸、提及、文字、表情符号。我想使用react-windowlib 来处理滚动messengerList，但我不确定是否react-window适合滚动 Messenger 聊天应用程序，因为当用户向上滚动时，messengerList会将新消息附加到列表中（如 facebook messenger）。

你能告诉我什么时候使用react-window以及我的聊天应用应该使用react-window吗？

感谢您的帮助。

antd 是很棒的组件库，但是在将 react-window 与 Transfer 组件集成时我面临一些挑战。

我正在尝试在 Transfer 组件中呈现一个巨大的列表，并且由于 antd 3.x Transfer 组件随着项目长度的增加而滞后，所以我想到了将 react-window 组件与 Transfer 组件一起使用。

在链接中：- https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js

我正在尝试将 react-window 与传输组件集成，但无法设置 antd 传输组件中可用的一些默认行为。要查看 antd 组件的默认行为，我们可以通过在代码库中将 perfMode 设置为 false 来检查。

将 FixedSizeList 组件与 Transfer 组件一起使用时，某些基本功能（例如 selectAll 等）不起作用。

任何可以为我指明正确方向的帮助表示赞赏。

重现步骤：-

1. 访问https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js
2. 要启用虚拟化，请转到 index.js 的第 126 行并将 perfMode 设置为 true。
3. 选择一些元素并单击右箭头。
4. 选定的元素移动到正确的存储桶，但不会被取消选中。

我正在尝试使用 react-window 呈现 CSV 数据（sampleCSVData）。我正在使用“，”拆分数据，然后尝试将其填充到 Cell 组件中。为了正确填充 Cell 组件，我需要一个像 0,1,2,3,4,5... 这样的系列，它应该在 13 次计数后更改为新行。我无法弄清楚这段代码：

请参阅此代码沙箱。

目前的结果：

预期结果： 或

目前，我正在使用下面的代码来渲染表格，它工作正常，但效率不高。

我想使用语义 HTML 标签（而不是使用 div）来创建一个带有 react-window 的表。

问题是 List (FixedSizedList) 创建了两个包装器。另一个被调用outerElementType，也是一个FixedSizedList带有默认值的道具div。这意味着我无法创建正确的表结构，并且所有结果都td在第一列中。看起来这两个都不能省略。我该如何解决这个问题？

当前代码：

我有一个 react-table v7（带有粘性页眉和页脚），它使用 react-window 呈现数千个虚拟化行。

一个新的要求需要表格也有粘性列，但我不能让它工作，因为 react-window 添加了几个嵌套的 div 用于虚拟化打破了列的粘性。

已经有一个钩子（https://github.com/GuillaumeJasmin/react-table-sticky）允许创建粘性列，但是一旦使用 react-window 它也会中断；一些开发人员指出了一些很好的解决方法，但页脚将不再粘滞（https://github.com/GuillaumeJasmin/react-table-sticky/issues/5）。

在这个阶段，我还尝试并排使用两张表（一张用于粘性列，一张用于其余列），但考虑到应用了虚拟化，当向上/向下滚动时，行会变得不同步。我也尝试使用另一个虚拟化组件（https://github.com/bvaughn/react-virtualized）但遇到了同样的问题。

有没有人遇到过相同或类似的问题并找到了让它工作的方法？

提前致谢。

使用可变大小的网格组件我只能跨行获得相同的列大小，但我想要跨行的列大小不同。这是一个非常大的列表。基本上类似于 hulu 的节目直播指南。

我需要知道是否可以使用 react-window 来显示项目列表，并在同一行显示带有每个操作的按钮。如果是，请给我一个关于如何做的提示。

我正在尝试结合 React-table 中的Row Selection和Virtualized Rows示例，但复选框未正确呈现，问题是当您单击它们时，您可以看到它们已激活，但直到您向上滚动才会出现刻度线或向下，当您取消选中复选框时也会发生同样的情况。

我在这里有一个工作示例。

我认为这与 React-Window 更新或重新渲染 div 的方式有关，但我对如何解决这个问题一无所知，任何帮助将不胜感激。

在我的反应项目中，我使用react-window包来呈现嵌套列表。每个父FixedSizeList行呈现一个组件，该组件使用另一个FixedSizeList. 父列表目前不超过 14 行。但子列表最多可能包含 2000 行。现在我的问题是，当我尝试滚动父列表时，视口中的所有子列表项似乎都重新呈现。这对我来说有点问题，因为在我的子列表项中，我d3js用来绘制具有过渡效果的条形图。所以这些不必要的重新渲染给了一个整体怪异的 UI。谁能帮助我如何停止这些不必要的渲染。

这是我的问题的一个非常简单的示例的代码和框链接。请打开控制台日志。初始加载后，最顶层的日志应该是这样的：初始控制台日志。

然后，如果您清除控制台并滚动父列表，您将看到如下日志：父滚动后的控制台日志。在这里您可以看到子列表 0 的子列表项正在重新渲染，这对我来说是不需要的。

谁能给我一个可以阻止这些重新渲染的解决方案？

*PS 我没有使用备忘录，因为每一行都在自己更新 dom。

编辑

我认为如果父列表停止将滚动事件传播给子列表，这个问题就会解决。我尝试在父列表行中添加event.stopPropagation()和，但输出与之前相同。event.stopImmediatePropagation()