问题标签 [react-window]

当我想向我的用户显示滚动时他/她在列表中的哪个位置时，我遇到了这个问题。简而言之，我想要一个计数器来指示可见行的当前索引。

这可以通过onItemsRendered.

但是，当使用react-window-infinite-loader时，该 prop 取自加载所需的子值，否则它会卡在加载状态。

有什么办法可以在无限加载器内的反应窗口列表中的元素之间添加间隙？设置边距不起作用。

我发现如何通过以下方式做到这一点：

我发现这个解决方案非常可怕，还有其他方法吗？

ps：设置itemSize50而不是在css中设置是行不通的。

我有一个带有起始页的项目，它显示了用户的整个项目列表。用户可以在表格和表格之间切换。

对于网格，我使用 CSS 网格

对于表格，我使用 Material UI 的 Table、TableCell、TableRow、TableHead 和 TableBody 组件。

现在我想找到一种用大数据渲染表格/表格的好方法。到现在为止，我有一个加载屏幕，当所有数据都加载完成时。那需要的时间太长了。

我找到 react-window 或 react-virtualized 和 react-virtualized-autosizer 但无法使其工作。是否有响应式 CSS 网格和表格的示例，您不知道项目的宽度和高度？

谢谢您的帮助！

我正在使用（和材料 UI 表）react-window创建虚拟表。react-table 7

我正在嵌入 FixedSizeList 而不是 TableBody。像这样的东西：

并且 RenderRow 返回 TableRows。像这样的东西：

由于react-window工作原理，它创建了几个divs 来实现列表滚动，根据需要动态嵌入所需的 TableRows，从而导致输出一个 react js 警告。

webpack-internal:///490:506 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>

只是忽略这个警告，不是我想做的事情，因为它可能会导致其他警告不被注意到。（我也不想在测试时使用发布版本）

那么是否可以防止发出此警告？或者是否可以在react-window不收到此警告的情况下用于表行？

更新：尝试设置innerElementType建议tbody。

这会更改FixedSizeList呈现的内部 div。

从：

至

所以现在包含在 tbody 中。

所以我想我还需要使用outerElementType来更改外部，来div处理警告，但我想不出任何有效的方法......divtable

如果我不想包含 a我可以thead设置outerElementType为table和innerElementTypetbody

我已经使用 react-window （基于#60）和材质 UI 实现了一个无限滚动表。

这张桌子似乎正在实现主要目标，但它几乎没有问题 -

1. stickyHeader尽管有适当的样式（道具），但标题并没有粘在顶部。
2. 快速向上滚动时，标题闪烁/闪烁。[重现步骤 - 向下滚动 50%，然后快速向上滚动并观察标题移动]。

这是代码框示例 - https://codesandbox.io/s/react-window-with-table-elements-forked-huti6?file=/src/index.tsx:514-542

我正在尝试在此沙箱之后使用 react-window https://github.com/bvaughn/react-window获得可扩展行 - https://codesandbox.io/s/bvaughnreact-window-variable-size-list-vertical -分叉-l10n7

这就是我所做的 - https://codesandbox.io/s/blazing-tdd-cq868?file=/src/Table.js

但是当我展开/折叠一行时，表格正在重置并移动到顶部。在开发人员工具中，我的代码重新渲染的整个表格。怎么做才能使我的代码表现得像上面的示例？

在最新版本的 react-select (3.1.0) 中虚拟化选项列表的预期方法是什么？有react-virtualized-select但不再支持。谢谢。

我正在使用 React-window（它是更现代的 react-virtualized 版本）来显示无限的图像列表。它适用于经典列表，但在用作网格时会冻结 ui。

我怀疑原因是 react-window 网格不会为每个元素发送一个唯一索引，而是一个行和/或列索引。长话短说，如果您每行显示 3 张图像：

• 第 1 行 => 图像 1 = 索引 0，图像 2 = 索引 1，图像 3 = 索引 2
• 第 2 行 => 图像 1 = 索引 0，图像 2 = 索引 1，图像 3 = 索引 2

所以项目是重复的，而不是接收索引 4,5 和 6。有没有人使用过图书馆的网格，如果是，你是如何设法在正确的列中检索正确的项目的？

我正在使用 React 构建像 Facebook 或 Twitter 这样的提要。我需要一个帖子列表......但是，我不知道是否值得拥有一个虚拟列表。

我不知道每个帖子的高度，直到它被渲染，因为它可能包含图像或视频，我还需要滚动整个窗口（不仅仅是一个元素），我需要它是一个无限列表（到当用户到达底部时加载更多帖子）。

使用虚拟列表而不是简单地显示所有帖子有什么好处？维护和设置我正在寻找的东西似乎需要做很多工作。

我正在组合react-window-scroller, react-window, and react-table- 我在水平滚动时遇到问题。似乎它失去了每一行的样式。尝试向下滚动一点，然后水平滚动 - 所有内容都消失了，现在尝试垂直滚动并再次显示？

发布网址： https ://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js

我不确定是什么导致了这个问题。如果我删除列表中的样式属性，可以正常工作，但是我失去了滚动到窗口的功能......