关于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 思否写作挑战「摸索编码世界之旅 - 记我的第一份编程工作」，欢送正在浏览的你也退出。