React 延迟加载在 React 完美滚动条中不起作用

Question

我正在使用react-perfect-scrollbar 显示图像列表。 在完美的滚动条内，我将延迟加载图像。但它不会起作用。

import React, { useState, useCallback, useEffect } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import useIsMountedRef from 'src/hooks/useIsMountedRef';
import LazyLoad from 'react-lazyload';
import {
  Box,
  Button,
  Link,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  CircularProgress,
  Typography,
  makeStyles
} from '@material-ui/core';
  const isMountedRef = useIsMountedRef();
  const [images, setImages] = useState([]);

  const getImages = useCallback(async () => {
      try {
        setLoading(true);
        const response = await axios.get(`${backendUrl}/images/get/images`);

        if (isMountedRef.current) {
          setImages(response.data.projectImages);
        }
      } catch (err) {
        console.error(err);
      } finally {
        if (isMountedRef.current) {
          setLoading(false);
        }
      }
  }, [isMountedRef]);

          <PerfectScrollbar options={{ suppressScrollX: true }}>
            <List className={classes.list}>
              {images.map((image, i) => (
                <ListItem
                  divider={i < images.length - 1}
                  key={i}
                  className={classes.listItem}
                >
                  <ListItemIcon>
                    <LazyLoad height={90} key={i} overflow>
                      <img
                        src={`${awsS3Url}/${image.Key}`}
                        className={classes.listImage}
                        onClick={() => onSelect(`${awsS3Url}/${image.Key}`)}
                      />
                    </LazyLoad>
                  </ListItemIcon>
                  <ListItemText
                    primary={GetFilename(image.Key)}
                    primaryTypographyProps={{ variant: 'h5' }}
                    secondary={bytesToSize(image.Size)}
                    className={classes.listItemText}
                  />
                    <MoreButton
                      handleArchive={() => handleRemoveOne(image)}
                    />
                </ListItem>
              ))}
            </List>
          </PerfectScrollbar>

正在显示一些图像（第一个没有滚动的视图）。 当我滚动时，图像不会加载，只显示没有图像的列表内容。

我写错了什么？

Answer 1

我遇到了同样的问题。问题是 react-lazyload 试图找到一个容器，其 overflow 属性设置为 scroll 或 auto，但完美滚动条将其 overflow 属性设置为 hidden 并手动处理滚动.所以我们必须手动告诉 react-lazyload 它应该监控哪个容器来处理 scroll 事件。

根据文档，这可以通过两种方式完成；通过传递HTMLElement 或查询选择器字符串。唉，库中似乎存在一个错误，如果该属性不是字符串 (https://github.com/twobin/react-lazyload/blob/055405125d0313014f0951cffc78345297f10a08/lib/index.js#L261)，则会导致该属性被忽略，因此目前唯一的方法是传递查询选择器字符串。

但是当我尝试传递一个针对完美滚动条容器的查询选择器字符串时，似乎当 react-lazyload 附加其事件侦听器时容器可能并不总是存在，因此我们必须检查容器是否确实存在在我们初始化 LazyLoad-container 之前。

所以相关代码是：

import React, { ReactElement, useRef, useState, useEffect } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar'
import LazyLoad from 'react-lazyload';

export default (): ReactElement => {

  // Get a reference to the wrapper element so we know when it is created
  const scrollbarWrapperRef = useRef(null);

  // Initialize a state setter to notify the view when the scrollParent becomes available
  const [scrollParent, setScrollParent] = useState<HTMLElement|null>(null);

  // Adjust this selector to your liking
  const scrollParentSelector = '#scrollbar-wrapper .scrollbar-container';

  // Here we make sure that the PerfectScrollbar container is actually available before we let the content and the LazyLoads be created.
  useEffect(() => {
    const scrollParentElement = document.querySelector(scrollParentSelector);
    if (scrollParentElement) {
      setScrollParent(scrollParentElement);
    }
  }, [scrollbarWrapperRef.current]);

  // The relevant DOM
  return (
    <div ref={scrollbarWrapperRef} id="scrollbar-wrapper">
      <PerfectScrollbar>
        { scrollParent &&
        <List>
          {images.map((image, i) => (
            <LazyLoad scrollContainer={scrollParentSelector}>
              <img src="..." />
            </LazyLoad>
          ))}
        </List>
        }
      </PerfectScrollbar>
    </div>
  );
}