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

Question

我正在做一个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)最初渲染一个空List,然后触发一个初始数据加载调用; b)更新rowCount财产,何时/何地执行此操作; c)管理表示当前数据块/页面的当前加载的数据集.

任何指针都将非常感激.

Answer 1

loadMoreRows作为道具传递给InfiniteLoader(你可以在例子中看到).这并不意味着手动调用,它是由内部使用InfiniteLoader和List,和向下滚动时,会自动调用.

rowCount可以同时拥有这两种行为.您的API可以告诉您有多少项而不是全部取出它们,或者它不能.rowCount只是告诉List我们有多少行.

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

这意味着什么？

如果我们加载了前10个商店,并且使用rowCount = 100,InfiniteLoader将显示100行,但只有前10个会有任何内容,其余的显示"loading"行占位符组件.并且当您向下滚动时出现"尚未加载"的行,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.不同之处在于向用户显示的内容," 哎呀,加载的内容,等待一些更多 "或" 看,这些都是所有项目,但尚未加载,请等待一些加载 "