关于typescript:IntersectionObserver-实现加载更多组件

import {useEffect, useRef} from 'react';
import {Spin} from 'antd';
import type {FsFC} from './types';
import './index.less';

type LoadMoreProps = {
  root?: Element | null; // 跟哪个元素重叠不传默认则是 整个浏览器窗口, 个别是父元素
  isLoading: boolean; // 用来判断如果 没有在申请列表才回执行
  more: () => void;};

const LoadMore: FsFC<LoadMoreProps> = ({root = null, isLoading, more}) => {const loadMoreRef = useRef(null);
  /** 建设加载更多观察者 */
  const loadMoreOb = () => {if (!loadMoreRef.current) {return;}
    const ob = new IntersectionObserver((entries) => {const [entry] = entries;
        // 有重叠，并且没有在申请
        if (entry.isIntersecting && !isLoading) {more();
        }
      },
      {
        root,
        threshold: 1,
      },
    );
    ob.observe(loadMoreRef.current);
  };

  useEffect(() => {loadMoreOb();
  }, []);

  return (<div className="load-more" ref={loadMoreRef}>
      <Spin />
    </div>
  );
};

export default LoadMore;

本文参加了 SegmentFault 思否写作挑战「摸索编码世界之旅 – 记我的第一份编程工作」，欢送正在浏览的你也退出。