react-infinite-scroll-component 在反应中，一个非常棒的无限滚动组件

痛定思痛。 2021-09-19 16:22 331阅读 0赞

使用一个组件，让你所有的无限滚动的痛苦消失，只有4.15kB！`Pull Down to Refresh`新增功能。一个无限的滚动，实际工作和超级简单的集成！

安装
      npm install --save react-infinite-scroll-component
    
      // in code ES6
      import InfiniteScroll from 'react-infinite-scroll-component';
      // or commonjs
      var InfiniteScroll = require('react-infinite-scroll-component');

# 使用 #

<InfiniteScroll
      dataLength={items.length} //This is important field to render the next data
      next={fetchData}
      hasMore={true}
      loader={<h4>Loading...</h4>}
      endMessage={
        <p style={
       {textAlign: 'center'}}>
          <b>Yay! You have seen it all</b>
        </p>
      }
      // below props only if you need pull down functionality
      refreshFunction={this.refresh}
      pullDownToRefresh
      pullDownToRefreshContent={
        <h3 style={
       {textAlign: 'center'}}>↓ Pull down to refresh</h3>
      }
      releaseToRefreshContent={
        <h3 style={
       {textAlign: 'center'}}>↑ Release to refresh</h3>
      }>
      {items}
    </InfiniteScroll>

这个`InfiniteScroll`组件可以通过三种方式使用。

*  为`height`如果你想要你的道具**可滚动**内容具有特定高度，提供滚动条以滚动内容并获取更多数据。
 *  如果你**可滚动**内容呈现在已提供溢出滚动条的父元素中，可以将`scrollableTarget`支持引用DOM元素并使用它的滚动条获取更多数据。
 *  而不设置`height`或`scrollableTarget`道具，滚动将发生在`document.body`喜欢*Facebook的*时间轴卷轴。

# 例子 #

*  使用Reaction(主体/窗口滚动)的无限滚动(永不结束)示例
 *  [https://codesandbox.io/s/yk7637p62z][https_codesandbox.io_s_yk7637p62z]
 *  无限滚动至500元素(主体/窗口滚动)
 *  [https://codesandbox.io/s/439v8rmqm0][https_codesandbox.io_s_439v8rmqm0]
 *  元素中的无限滚动(高度400 px的div)
 *  [https://codesandbox.io/s/w3w89k7x8][https_codesandbox.io_s_w3w89k7x8]
 *  无限滚动`scrollableTarget`(可滚动的父元素)
 *  [https://codesandbox.io/s/r7rp40n0zm][https_codesandbox.io_s_r7rp40n0zm]

API

请转[https://github.com/ankeetmaini/react-infinite-scroll-component][https_github.com_ankeetmaini_react-infinite-scroll-component]

[https_codesandbox.io_s_yk7637p62z]: https://codesandbox.io/s/yk7637p62z
[https_codesandbox.io_s_439v8rmqm0]: https://codesandbox.io/s/439v8rmqm0
[https_codesandbox.io_s_w3w89k7x8]: https://codesandbox.io/s/w3w89k7x8
[https_codesandbox.io_s_r7rp40n0zm]: https://codesandbox.io/s/r7rp40n0zm
[https_github.com_ankeetmaini_react-infinite-scroll-component]: https://github.com/ankeetmaini/react-infinite-scroll-component