// 部分程式碼片段
import InfiniteScroll from 'react-infinite-scroller';
import {Scrollbars} from 'react-custom-scrollbars';

//初始的state的狀態
this.state = {
	loading: true,
	hasMore: true,
	pageNum: 1,
	pageSize: 20,
	total: 0,
	data: [],
};

// 獲取下一頁資訊
getMore = () => {
     if (this.state.total === this.state.
 
data.length) {
         return;
     }
     this.setState({
         loading: true,
         pageNum: this.state.pageNum + 1
     }, () => {
         this.initData(); //請求資料介面
     });
 }
//元件呼叫
<Scrollbars id='list-scrollbars' style={{height: "calc(100vh - 260px)"}} autoHide >
	<InfiniteScroll
   	   className=
 
"list-contents"
       initialLoad={false}
       pageStart={0}
       loadMore={this.getMore.bind(this)}
       hasMore={!this.state.loading && this.state.hasMore}
       useWindow={false}
   	 >
      {this.renderItemList(data)}
      {total === data.length && data.length > 4 ?
 
 <div className="end-text">所有資料已看完</div> : ""}
   </InfiniteScroll>
   {this.state.loading ? <div style={{position: 'relative', marginTop: 30}}><Loading/></div> : ""} // 滾動載入狀態的loading狀態
</Scrollbars>

效果說明：
分頁取資料，一頁20條為例，滾動完20條之後就載入下一頁~