React Ionic infinite scroll example

  I try to use infinite scroll component in Ionic (React) project, but there is no document about how to use it, for the official document, it said that ionic react does not support infinite scroll yet. But in source code, it exists. Then I try to fixed it by myself, here is the sample code that I use, it works well:

    作者：亚艾元技术部

我在Ionic（react）项目中，尝试使用无限下拉组件，但是官方没有这方面的文档，官方文档说不支持这个功能暂时，但是在最新的代码里面已经添加了这个组件。我经过自己的不断尝试，将这个常用功能搞定，下面是可以工作的代码：

class Reports extends React.Component<Props, State> {
  ionInfiniteScrollRef: React.RefObject<HTMLIonInfiniteScrollElement>;
  constructor(props: Props) {
    super(props);
     this.ionInfiniteScrollRef = React.createRef<HTMLIonInfiniteScrollElement>();
    this.state = {
      items: [],
         hasMore: true,
         page:0
      //showPopover: false,
      //showPopoverEvent: null
    };
  }
 
  componentDidMount() {
     this.loadItems();
  }
  loadMoreItems = () =>{
     this.loadItems();
      if (this.ionInfiniteScrollRef.current) {
      this.ionInfiniteScrollRef.current.complete();
      }           
        //e.target.complete();
  }
….
<IonContent color="primary" >
    {this.renderList()}
  <IonInfiniteScroll threshold="50px" ref={this.ionInfiniteScrollRef}  onIonInfinite={this.loadMoreItems}>
    <IonInfiniteScrollContent
      loadingSpinner="bubbles"
      loadingText="Loading more data...">      
    </IonInfiniteScrollContent>
  </IonInfiniteScroll>
 </IonContent>

Several key points:

1, put IonInfiniteScroll after your list.

2, ref={this.ionInfiniteScrollRef}, using Ref to get the instance of IonInfiniteScroll

3, complete it using code “this.ionInfiniteScrollRef.current.complete(); “ in loadMoreItems. Complete method could not be called when componentDidMount.

这个问题的关键点：

1， 是IonInfiniteScroll列表放在列表的下面，

2， 使用ref=这个属性，获取当前的IonInfiniteScroll

3,   完成的代码调用“this.ionInfiniteScrollRef.current.complete(); “，我开始尝试把它放在loadItems这个函数里面，loadItems这个函数在componentDidMount里面调用了，这种情况下，会报没有.complete方法。我将它移出来，放在loadMoreItems，解决了这个问题。