scrol

https://github.com/ankeetmaini/react-infinite-scroll-component

import './alist.css';
import {api} from '../common/axios'
import React, { useState ,useEffect}  from 'react';
import {HashRouter, Redirect ,Route, Switch,Link,useHistory } from 'react-router-dom';

import InfiniteScroll from "react-infinite-scroll-component";


  function AirticleItem(props){
    let history = useHistory();
    function handClick(e){
      //alert(props.item.title)
      history.push("/article/"+props.item._id);
    }
    return (
          <div onClick={handClick} className="AirticleItem">

              <div>   
                <h5>{props.item.title}</h5>
              </div>

                 <div dangerouslySetInnerHTML={{__html:props.item.content}}></div>
              <div>
                <span>{props.item.time}</span>
                <span>{props.item.size}</span>
                <span>{props.item.type}</span>
              </div> 
          </div>
    );
  }

let gSetMsg = null;
let gMsg = null;
let gList = [];
async function getMsg(){
    if(gMsg>=1) return;
    //debugger;
    let ret = await api.get('/api/list?time='+new Date().getTime())
   // debugger;
    if(ret == undefined) return;
    console.log('---------------->')
    console.log(ret)
   
    //this.setState({data:ret.list})
    gList = ret
    console.log(gList)
}


class Mlist extends React.Component {
  state = {
    items: Array.from({ length: 0 })
  };
  componentDidMount() {
    this.fetchMoreData();
  }
  fetchMoreData = () => {
    // a fake async api call like which sends
    // 20 more records in 1.5 secs

    getMsg();
    setTimeout(() => {
      this.setState({
        items:this.state.items.concat(gList) //this.state.items.concat(Array.from({ length: 20 }))
      });
    }, 800);
  };

  render() {
    return (
      <div>

        <InfiniteScroll
          dataLength={this.state.items.length}
          next={this.fetchMoreData}
          hasMore={true}
          loader={<h4>加载中...</h4>}
        >
          {this.state.items.map((i, index) => (
              <AirticleItem  item = {i}/> 
          ))}
        </InfiniteScroll>
      </div>
    );
  }
}


export default Mlist;