react-virtualized InfiniteLoader/List - 使用 AJAX 的工作示例

IT技术 reactjs react-virtualized
2021-05-27 16:06:02

我正在做一个 React/Redux 项目，需要实现一个虚拟化/无限加载列表。 react-virtualized似乎打算完成这项工作，但即使在阅读了所有可用的文档并阅读了许多 StackOverflow 帖子之后，我仍然无法让它工作或找到对组件实际工作机制的清晰解释。

我看过的主要例子是：

https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples

我遇到的主要问题是：

  1. 目前还不清楚loadMoreRows()在初始加载/渲染情况下如何触发加载器进行调用。典型的场景是我们将组件设计为通过loadMoreRows()在最初呈现时调用来使用数据初始化自身。实现这一点所需的配置值并不明显。

  2. 不清楚该rowCount属性是要表示加载行的当前状态（数据块/页面中的行数），还是完整的行数据集的总数。而且，无论哪种情况，在进行初始 AJAX 加载调用之前都无法知道这些，那么设置 的初始值的意图是rowCount什么？

我曾尝试将各种示例中的代码放入我的项目中，但我从未看到loadMoreRows有人进行过调用。我认为需要的是一个充实的示例，它演示了一个非常典型的用例： a) 最初呈现一个空列表，然后触发初始数据加载调用；b) 更新rowCount财产，以及何时/何地更新；c) 管理代表当前数据块/页面的当前加载的数据集。

任何指针将不胜感激。

1个回答

loadMoreRows作为props传递给InfiniteLoader（您可以在示例中看到）。它并不意味着手动调用，它由InfiniteLoaderand内部使用List，并在向下滚动时自动调用。

rowCount可以有这两种行为。您的 API 可以在不获取所有项目的情况下判断有多少项目，或者不能。rowCount简单地告诉List有多少行。

因此，例如，假设我们有 100 家商店，我们的第一次 fetch 给了我们前 10 家。同样的响应应该说明是否还有更多商店要提取。另一个 fetch 可以告诉我们总共有 100 家商店。有了这个，我们可以使用总数 100 as rowCount（通过查询商店的总数，而不是全部获取）或者我们可以使用 10 + 1 as rowCount，因为第一次获取告诉我们还有更多的商店要加载。

这意味着什么？

如果我们加载了前 10 个商店，并使用rowCount = 100,InfiniteLoader将显示 100 行，但只有前 10 个有任何内容，其余的显示“正在加载”行占位符组件。当您向下滚动时InfiniteLoader会出现“尚未加载”的行，因此会调用该loadMoreRows函数来加载更多行。

另一方面，如果我们使用rowCount = 10 + 1,InfiniteLoader将只显示 11 行，只有最后一行是“加载”行占位符组件。当loadMoreRows被调用时，rowCount将是items.length + 1 === 20 + 1。

加起来

loadMoreRows不是要手动调用。InfiniteLoader当未加载的行显示在视口中时，它会自动调用。所以最初rowCount可能只是1，不会加载任何行，并且loadMoreRows会被调用。

rowCount可以是currentItems.length + (moreToBeLoaded ? 1 : 0)或totalItems。不同之处在于向用户显示的内容，要么“oop，加载的结束，等待更多”或“看，这些都是存在的项目，但尚未加载，请等待一些项目加载“

其它你可能感兴趣的问题
上一篇使用 ReactJS 和 React Router 更改每个路由的页面背景颜色？ 下一篇React 0.60.4 更新中断了 Android 构建（错误找不到符号）