基于react hook ts 封装antd mobile InfiniteScroll的公用组件

基于React Hooks和TypeScript封装Ant Design Mobile的InfiniteScroll（无限滚动加载）公用组件，可以简化处理分页加载列表的操作。以下是创建这样一个组件的基本步骤：

1. 首先，你需要安装必要的依赖项，包括`react`, `antd-mobile`, `@types/react-dom`, 和 `@types/react-infinite-scroller`。如果还没安装，可以在项目目录下运行：

   npm install react antd-mobile @types/react-dom @types/react-infinite-scroller

2. 创建一个名为`InfiniteLoadList.tsx`的文件，开始编写组件：

import React, { useState, useEffect } from 'react';
import { List, SwipeAction } from 'antd-mobile';
import InfiniteScroll from 'react-infinite-scroll-component';

type Item = {
  // 根据实际数据结构定义你的item类型
};

interface Props {
  data?: Item[], // 初始数据数组
  loadMore?: () => Promise<Item[]>, // 加载更多数据的函数
  hasMore?: boolean, // 是否还有更多数据，默认true
  renderItem?(item: Item): JSX.Element, // 每一项如何渲染
}

const InfiniteLoadList: React.FC<Props> = ({ data = [], loadMore, hasMore = true, renderItem }) => {
  const [items, setItems] = useState(data);
  const [scrolling, setScrolling] = useState(false); // 当前是否正在滚动

  // 使用useEffect来监听滚动事件，并在用户停止滚动后检查是否有更多数据
  useEffect(() => {
    const handleScrollEnd = async () => {
      if (!scrolling && hasMore) {
        try {
          setScrolling(true); // 设置为滚动中防止重复加载
          const newData = await loadMore(); // 调用loadMore函数获取新数据
          if (newData.length > 0) {
            setItems([...items, ...newData]);
            setHasMore(newData.length > 0); // 更新hasMore状态
          }
        } finally {
          setScrolling(false); // 停止滚动后重置标志
        }
      }
    };

    const scrollElement = document.querySelector('.am-list') as HTMLElement; // 获取滚动区域
    if (scrollElement) {
      scrollElement.addEventListener('scroll', handleScrollEnd);
      return () => scrollElement.removeEventListener('scroll', handleScrollEnd);
    }
  }, [loadMore, hasMore]);

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={loadMore} // 当hasMore为false时，next会自动结束加载
      hasMore={hasMore}
      loader={({ lastItem, loadedPages }) => (
        <SwipeAction>
          <span style={{ color: 'gray' }}>加载更多...</span>
        </SwipeAction>
      )}
      endMessage={
        hasMore ? null : '已达到列表底部，没有更多数据了'
      }
      scrollEventThrottle={16} // 控制滚动间隔，减少不必要的请求
      useWindow
    >
      {items.map((item) => renderItem(item))}
    </InfiniteScroll>
  );
};

export default InfiniteLoadList;

在这个组件里，你可以传递`data`、`loadMore`和自定义渲染函数给它。当用户滚动到底部时，组件会自动检测并触发`loadMore`函数加载更多数据。