React无限滚动加载列表组件的封装实现

scrollEvent = async (e) => {
    let scrollHeight = e.target.scrollHeight;
    let scrollTop = e.target.scrollTop;
    let offsetHeight = e.target.offsetHeight;
    if (offsetHeight + scrollTop >= scrollHeight) {
      console.log('列表触底,触发接口请求数据');
      this.setState({ loading: true });
      let result = await this.loadData();
      this.setState({
        loading: false,
        list: this.state.list.concat(result),
      });
    }
  };

window.addListener('scroll',()=>scrollEvent())

import React, { ReactNode, useEffect, useRef } from 'react'
import classnames from 'classnames'

interface InfiniteScrollListProps<T> {
    loading: boolean
    dataSource: Array<T>
    renderItem: (data: T) => ReactNode
    renderSkeleton?: () => ReactNode
    hasMore: boolean
    loadMore: () => void
    className?: string
}

export default function InfiniteScrollList<T>(props: InfiniteScrollListProps<T>) {
    const { loading, dataSource, renderItem, renderSkeleton, loadMore, hasMore, className } = props

    const containerRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        const scrollEvent = (event) => {
            if (!hasMore || loading) return
            //可视区高度
            let scrollHeight = event.target?.scrollHeight
            //滚动高度
            let scrollTop = event.target.scrollTop
            //列表内容实际高度
            let offsetHeight = event.target.offsetHeight
            if (offsetHeight + scrollTop >= scrollHeight) {
                console.log('列表触底')
                loadMore()
            }
        }

        containerRef.current?.addEventListener('scroll', scrollEvent)

        return () => {
            containerRef.current?.removeEventListener('scroll', scrollEvent)
        }
    }, [hasMore, loading])

    return (
        <div className={classnames('flex-1 flex flex-col overflow-y-auto', className)} ref={containerRef}>
            {dataSource.map((data) => {
                return renderItem(data)
            })}
            {loading && new Array(4).fill(0).map(() => renderSkeleton?.())}
        </div>
    )
}