react-window如何实现到底加载更多？

Question

react项目，数据量大，需要用react-window，还希望滚动到底加载下一页数据，这个要怎么实现，看react-window文档没有相关介绍。

https://github.com/pupudu/window-table/issues?q=loadmore

Answer 1

react-window 不是这个库么 https://github.com/bvaughn/react-window/ …… 你贴的是啥……

至于怎么触底无限加载项目首页上给方案了，react-window-infinite-loader 那个就是。

Answer 2

IntersectionObserver 了解一下

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


export type ReactFC<T = any> = FC<PropsWithChildren<T>>;

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

const LoadMore: ReactFC<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;