react 分页组件react-infinite-scroller的使用

state定义所需初始值

   this.state = {
      hasMore: true,
      pageNum: 1,
      pageSize: 10,
      data: []
    };

加载更多

// 获取下一页信息
不需要在 componentDidMount()获取数据设置hasMore为true时已经开始加载第一页数据了

  getMore = () => {
    this.$post("/community/list", {
      pageNum: this.state.pageNum,
      pageSize: this.state.pageSize
    }).then(res => {
      this.setState({
        pageNum: this.state.pageNum + 1,
        hasMore: res.data.hasNextPage,
        data: this.state.data.concat(res.data.list)//数组连接
      });
    });
  };

render内容区域

 render() {
    const data = this.state.data;
    return (
      <div style={{ height: "calc(100vh - 60px)", overflow: "auto" }}>
        <InfiniteScroll
          className="list-contents"
          pageStart={1} //首页为1，可根据自己的具体需求
          loadMore={this.getMore.bind(this)}
          loader={
            <div className="loader" key={0}>
              Loading ...
            </div>
          }
          useWindow={false}  //****将滚动侦听器添加到窗口，或者添加组件的parentNode****
          hasMore={this.state.hasMore}
        >
          {this.renderItemList(data)}  //自定义渲染内容可以在这写也可以提出来
        </InfiniteScroll>
      </div>
    );
  }