问题标签 [react-virtualized]

我使用的是 material-ui 的 List 和 ListItem 组件。具体来说，我使用的是嵌套项功能。请参阅http://www.material-ui.com/#/components/list 在页面的一半左右，您将看到嵌套列表。关键是：material-ui 负责“嵌套”问题，例如缩进和展开/收缩箭头。

一旦我添加了许多项目，我意识到这个列表非常慢。所以我偶然发现了来自 react-virtualized 的 AutoSizer。问题是：在 react-virtualized 中，我的代码需要为每一行提供一个 rowRenderer 函数。我不想失去计算嵌套项目缩进的内置 material-ui 功能。然而，使用 AutoSizer 似乎我的代码需要进行自定义工作才能确定缩进。我的代码也需要提供扩展/收缩箭头。目前它与 material-ui 的 List/ListItem 一起免费提供。

有什么提示或建议吗？

谢谢

我正在尝试为 Grid 组件（使用 react-virtualized）集成自定义滚动条（使用 react-custom-scrollbars：https ://github.com/malte-wessel/react-custom-scrollbars ）。

我试图按照这个 github 问题（https://github.com/bvaughn/react-virtualized/issues/143）的指示进行操作，但是没有运气。

任何有关一起使用这两个库的见解将不胜感激！

更新：在 react-virtualized 的 gitter room 搜索后，我遵循了一个建议，即使用完美滚动条包（而不是 react-custom-scrollbars）和 react-virtualized 一起使用。到目前为止，他们工作得很好。

我们想知道在将数据源加载到反应虚拟化表时如何正确定义默认排序列。

现在我们正在定义一个排序方法并且工作正常，一旦我们点击表格列。

但是，当表格第一次显示时，我们找不到设置默认排序值的方法。

这是我们的实现。任何帮助是极大的赞赏。

我正在尝试使用这样<ScrollSync>的嵌入式<AutoSizer>：

这当然大大简化了，但会让我的观点得到理解（我希望）。所以网格的onScroll连接到scrollsync。我的问题是，每当自动调整器因为我使我的窗口更宽而触发时，scrollSync 将不会被通知新的scrollWidth。知道如何解决这个问题吗？

我正在尝试使用带有异步 API 调用的 React-Virtualized-Select 来加载选项，但它永远不会完成 loadOptions 方法。这是完整的文件：

getPlayers 中的第二个回调是将数组数组转换为对象数组；console.log 打印一个数组，如下所示：

但随后搜索栏中的微调器挂起，并且从不显示“正在加载...”之后的选项。不知道如何更好地发送数据。

我有一个可用的虚拟滚动网格，用于按页面上的部分显示文档。我现在为搜索结果添加了另一个 RV，但由于某种原因，当我向下滚动时，内容会滚出视图！我试图将其简化为仅使用具有预定高度的列表并消除潜在因素，但它仍然给了我这个奇怪的错误。代码本身按预期工作，它是起作用的列表。（我实际上是使用 Cell Measurer 来获取行高，但即使使用以下版本，它也会起作用）。这是代码：

谢谢

我在 StackOverflow 上浏览了很多答案。我也在这里浏览了 List 文档react-virtualized/List。但是，我仍然无法理解如何在反应虚拟化列表中动态设置行高。如何计算rowHeightprop 函数中的高度？

我可以调用我的函数，如rowHeight={({ index }) => this.computeRowHeight({ index })}. 但是该函数将如何计算行高？

以下是供参考的代码。

更新

动态高度现在与以下代码一起使用CellMeasurer。但是，不幸this.loadMoreRows()的是函数没有被调用InfiniteLoader。没有CellMeasurer它也不起作用。我不确定我在下面的代码中做错了什么。

任何帮助将不胜感激。谢谢！

我想知道是否有任何方法可以在列表末尾添加填充底部。我需要这个，因为我在列表底部有一个材质浮动按钮。因此，如果用户走到列表的末尾，该填充将保存最后一个要从按钮覆盖的项目。

谢谢你

如果我可以使用 React Virtualized 的 Collection 组件来解决我的问题，我有点困惑。我将尝试描述我在做什么：

我在页面上使用 React Virtualized 来显示两个项目列表/集合。我已经完成了第一个具有相同宽度和高度的项目的集合：

第一个集合非常简单且易于实施。现在我正在处理第二个集合，其中包含不同大小的图像。我希望单元格具有相同的高度但不同的宽度（当然取决于图像尺寸）。问题是行可能并不总是具有相同数量的单元格：

这可以通过 React Virtualized 实现吗？如果是这样，我如何确定“cellSizeAndPositionGetter”中的位置？

是否可以让 List（或 RV 中的任何其他组件）像 UL>LI 列表或特别像React Bootstraps ListGroup一样呈现自身。

目前，我看不到让外部元素 (LIST) 呈现除 DIV 之外的任何内容的选项。

所以我的用例实际上是每一行都应该是一个 ListGroupItem（例如，应用了 BS 类的 li）并且容器应该是一个 ListGroup 组件。