client-s/src/compents/InifiniteList/index.jsx

import React, { useEffect, useRef, useState } from 'react'
import ReactList from 'react-list'
import './index.scss'

export default props => {
  const ref = useRef()

  const handleScroll = () => {
    const done = props.length >= props.total

    if (!done) {
      const [, last] = ref.current.getVisibleRange()
      // 如果未展示的数据少于3条就请求数据
      if (props.length - last < 3) {
        props.loadMore()
      }
    }
  }

  const NoData = (
    <div className="no-data">
      {props.nodata || '暂无数据'}
    </div>
  )

  return (
    <div className="inifinite-list-wrapper" style={{height: props.height}} onScroll={handleScroll}>
      {
        !props.length ? NoData :
        <ReactList
          ref={ref}
          type="uniform"
          length={props.length}
          itemRenderer={props.itemRenderer}
        />
      }
    </div>
  )
}