反应相册无限滚动

Question

我正在尝试在 React 相册组件上实现无限滚动，

我正在尝试使用这个库：

https://react-photo-album.com

我可以检测到用户何时向下滚动并获取更多照片（通过在相册正下方设置交叉观察器）问题是当我将这些照片添加到状态并从那里添加到图库组件的道具时，然后该组件重新渲染并显示顶部的所有图像。

我可以实现自己的图库组件，但是很难以良好的响应式行或列布局来显示不同尺寸和不同比例的照片，

这是我的代码：

import React, { useState, useCallback, useRef } from 'react';
import PhotoAlbum from 'react-photo-album';

const [images, setImages] = useState<ImageState[]>([]);

  const lastImageObserver = useRef<IntersectionObserver>();

  const lastImageElementRef = useCallback(
    (node: any) => {
      if (lastImageObserver.current) lastImageObserver.current.disconnect();
      lastImageObserver.current = new IntersectionObserver(
        (entries) => {
          if (entries[0].isIntersecting) {
            console.log('last image is intersecting');
            if (currentPage < Math.ceil(totalImages / rowsPerPage)) {
              setCurrentPage((prevPage) => prevPage + 1);
            }
          }
        },
        {
          threshold: 0.1,
        }
      );
      if (node) lastImageObserver.current.observe(node);
    },
    [currentPage, rowsPerPage]
  );

  const fetchImages = useCallback(async () => {
    const result = await getPhotos(
      currentPage,
      rowsPerPage
    );
    const newImages = result.images;
    setImages((prev) => [...prev, ...newImages]);

  }, [currentPage totalImages]);


  return (

       <PhotoAlbum
                  layout="rows"
                  photos={images}
                />
                <div
                  ref={lastImageElementRef}
                  style={{ minHeight: '1px' }}
                ></div>
              </div>
            </div>
            )

我应该如何处理这个问题？任何帮助将不胜感激，谢谢！

Answer 1

您可以使用“react-infinite-scroller”包。

npm 安装react-infinite-scroller --s

import InfiniteScroll from 'react-infinite-scroller';

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key=. 
    {0}>Loading ...</div>}
 >

    <PhotoAlbum
        layout="rows"
        photos={images}
    />
</InfiniteScroll>