為什么我的 react-lazyload 組件不起作用？

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/

（檢查 Inspector 中的 Network 選項卡以查看所有圖像都是從初始加載請求的）

這里還有一個視頻

知道我做錯了什么嗎？

在此先感謝，莫滕

Answer 1

我遇到了與 npm package react-lazyload類似的問題。 一方面，這個 package 每個 LazyLoad 組件只允許一個子組件，因此您必須重新排列層次結構才能使其工作。 其次，在加載已經在視口中設置的圖像時，我發現了一些奇怪的行為。 該文檔確實列出import {forceCheck} from 'react-lazyload'; 結合forceCheck(); 作為手動檢查元素的一種方法，但我發現這對於不重新渲染的組件來說不方便且不足。

我能夠通過替代 package react-lazy-load更輕松地實現完全相同的功能。 注意連字符。 這個 package 也需要 node>0.14。 或多或少，它做同樣的事情。 你可以在這里閱讀他們的文檔： react-lazy-load