手写上拉加载

父组件 

  let [myPageParams, setMyPageParams] = useState(pageInit);
  let [myMaterialList, setMyMaterialList] = useState({
    list: [],
    total: 0,
  });

  useEffect(() => {
    getMyMaterial();
  }, [myPageParams]);

  <ImgMaterialList
          list={myMaterialList}
          params={[myPageParams,setMyPageParams]}
          loading={list.loading}
          />

ImgMaterialList组件

import React, { useRef, useEffect, useState, useCallback, useContext } from 'react';
import classNames from 'classnames';
import { Icon, Row, Col, Spin } from 'antd';
import throttle from 'lodash/throttle';
import styles from '../index.less';
import { C } from '../index';

interface Iprops {
  list: any;
  params: any[];
  loading: Boolean;
}
const imgMaterialList: React.FC<Iprops> = (props) => {
  let { list, params, loading } = props;
  let { list: dataList,total } = list;
  const { selectImg, setSelectImg } = useContext(C);
  let [pageParams, setPageParams] = params;
  let containerRef = useRef(null);

  const selectHandler = (item: any) => {
   setSelectImg({
      imgUrl: item.imgUrl,
      materialId: item.materialId,
    });
  };

  useEffect(() => {
    let container = containerRef.current as unknown as HTMLElement;
    container.addEventListener('scroll', pullLoad);
    return () => {
      container.removeEventListener('scroll', pullLoad);
    };
  }, []);

  const pullLoad = useCallback(
    throttle(() => {
      let container = containerRef.current as unknown as HTMLElement;
      let scrollTop = container.scrollTop;
      let clientHeight = container.clientHeight;
      let scrollHeight = container.scrollHeight;
      // 完整内容区域 比 可见区域高度小，不可上拉加
      if (scrollHeight <= clientHeight) {
        return;
      }
      //距离底部距离
      const distance = 10;

      //上拉到了底部，开始加载数据
      if (scrollTop + clientHeight + distance >= scrollHeight) {

        //判断数据是否加载完
        if (dataList.length >=total) {
          return;
        }
        let { pageNum } = pageParams;
        setPageParams({
          ...pageParams,
          pageNum: pageNum + 1,
        });
      }
    }, 300),
    [dataList,total, pageParams],
  );

  return (
    <div className={styles.materialWrap} ref={containerRef}>
      <div>
        <Row gutter={[12, 12]}>
          {dataList.map((item: any) => (
            <Col span={4}>
              <div
                className={classNames(styles.imgBox, {
                  selected: item.materialId === selectImg.materialId,
                })}
                onClick={() => selectHandler(item)}
              >
                <div className={styles.imgCon}>
                  <img src={item.imgUrl} />
                </div>
                <span
                  className={classNames(styles.checkBox, {
                    selectedCheck: item.materialId === selectImg.materialId,
                  })}
                >
                  <Icon type="check" />
                </span>
              </div>
            </Col>
          ))}
        </Row>
        <div className={styles.loadBottom}>
          <Spin spinning={loading} />
        </div>
      </div>
    </div>
  );
};

export default imgMaterialList;