如何使用react-lazyload或react-lazy-load而不设置高度道具？

react-lazyload 是一个用于延迟加载 React 组件的库，它可以帮助提高页面加载性能，尤其是在有大量图片或其他媒体内容的页面上。通常情况下，使用 react-lazyload 需要为每个懒加载的组件设置一个固定的高度，以确保页面布局在内容加载前不会发生跳跃。

如果你不想设置高度道具，可以采取以下几种方法：

方法一：使用占位符

你可以使用一个占位符元素来预留空间，这样即使内容还没有加载，页面布局也不会受到影响。例如，你可以使用一个具有相同宽高比的 div 作为占位符。

import LazyLoad from 'react-lazyload';

const MyComponent = ({ imageUrl }) => (
  <LazyLoad height={200} once>
    <img src={imageUrl} alt="Lazy loaded image" />
  </LazyLoad>
);

在这个例子中，height 属性被设置为 200，你可以根据实际情况调整这个值。

方法二：使用 CSS 的 padding-bottom 技巧

另一种方法是使用 CSS 的 padding-bottom 属性来创建一个占位符，这样可以在不设置高度的情况下保持元素的宽高比。

import LazyLoad from 'react-lazyload';
import './MyComponent.css';

const MyComponent = ({ imageUrl }) => (
  <div className="lazy-load-container">
    <LazyLoad once>
      <img src={imageUrl} alt="Lazy loaded image" className="lazy-load-image" />
    </LazyLoad>
  </div>
);

然后在 CSS 文件中：

.lazy-load-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
}

.lazy-load-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在这个例子中，.lazy-load-container 的 padding-bottom 设置为 56.25%，这是基于 16:9 的宽高比计算出来的。你可以根据你的图片或其他内容的实际宽高比来调整这个值。

方法三：使用 Intersection Observer API

如果你不想使用第三方库，可以直接使用原生的 Intersection Observer API 来实现懒加载，并且不需要设置高度。

import React, { useEffect, useRef } from 'react';

const LazyLoadImage = ({ imageUrl }) => {
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = imageUrl;
          observer.unobserve(img);
        }
      });
    });

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => {
      if (imgRef.current) {
        observer.unobserve(imgRef.current);
      }
    };
  }, [imageUrl]);

  return <img ref={imgRef} alt="Lazy loaded image" />;
};

export default LazyLoadImage;

在这个例子中，我们使用了 useRef 和 useEffect 钩子来创建一个懒加载的图片组件。当图片进入视口时，Intersection Observer 会触发回调函数，并将图片的 src 属性设置为传入的 imageUrl。