为什么我的React懒加载组件无法正常工作？

Question

直到几天前，我的LazyLoad实现一直运行良好，但现在似乎无法使其正常工作。

这是我的组件：

import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';

const Image = image => (

  <LazyLoad height={200} offset={100} once>

    <div
    className="image-container"
    orientation={image.orientation}>    

      <img
      className="image"
      src={image.url}
      alt={image.alt}
      />

      {'caption' in image &&
        <div className="meta">
          <p className="caption">{image.caption}</p>
          <p className="order">{image.currentNumber}/{image.maxNumber}</p>
        </div>
      }

    </div>

  </LazyLoad>  
)

export default Image

在 App.js 中，它被这样调用：

render() {

        return (
            <div className="wrapper">

                <GalleryTop details={this.state.gallery_top} />

                {this.state.images.map((image, index) => <Image key={index} {...image} /> )}
          </div>
        )
    }

但它不能工作！这是演示环境： https://gifted-kare-1c0eba.netlify.com/

（检查检查器中的网络选项卡，查看所有图像是否从初始加载中请求）

还有一个视频在这里

你知道我做错了什么吗？

提前致谢， 莫尔滕

- mortenbjoern

---

我对react-lazyload并不是很熟悉，但从阅读该仓库的自述文件来看，可能需要将img作为LazyLoad的直接子元素。你可以试一下这个方法吗？ - Jackyef

Answer 1

我在使用npm包react-lazyload时遇到了类似的问题。首先，这个包只允许每个LazyLoad组件有一个子元素，因此您需要重新安排层次结构使其正常工作。其次，当加载已经设置在视口内的图像时，我发现了一些奇怪的行为。文档确实列出了import {forceCheck} from 'react-lazyload';与forceCheck();结合使用来手动检查元素的方法，但我认为这很不方便且对于没有重新渲染的组件而言不够充分。

我能够通过另一个名为react-lazy-load的替代包获得完全相同的功能，它更容易实现。请注意连字符。这个包还需要node>0.14。或多或少地，它做的是同样的事情。您可以在此处阅读他们的文档：react-lazy-load。

- ZontarZon

---

为了补充那些找到这个页面的人，应该在组件的useEffect中使用forceCheck，并将props作为依赖项。在大多数情况下，您会使用Lazyload并使用.map渲染元素数组。当元素数组发生更改（即props），您应该调用forceCheck，以便lazyload重新检查视口以渲染任何要显示在视口中的项目。 - Someone Special

react-lazy-load不支持React 17。在尝试之前，请检查依赖项列表。 - VanAlbert