当我滚动到屏幕的一半时，我希望我的react组件加载更多的数据。

Question

我正在创建一个React项目，在这个项目中，我通过调用api来呈现数据，每次api都给出长度为10的数据数组。我使用react-infinite-scroll-component来使用无限滚动功能。每当我滚动到屏幕的一半部分时，我都希望每次都加载数据，我不想在屏幕上显示加载程序。有人能帮我吗。

 <InfiniteScroll
            dataLength={data.length}
            next={fetchMoreData}
            hasMore={true}
            loader={
              <CircularProgress/>
            }
          >
            {data.map((item, index) => {
              return <Card data={item} key={index} />;
            })}
          </InfiniteScroll>

这是我的无限滚动代码，我试着更改dataLength道具，但没有成功。

Answer 1

我认为您可能希望使用scrollThreshold属性，因为它定义了何时调用next。

您可以传递一个浮点数(例如0.5 )或字符串(例如“200 to”)来定义这一点。

如果你想移除装载机，只需省略那个支柱。

来源于这里的道具列表：https://www.npmjs.com/package/react-infinite-scroll-component