如何在没有设置高度道具的情况下使用 react-lazyload 或 react-lazy-load？

Question

我想延迟加载文章列表组件，但 react-lazyload 和 react-lazy-load 都强制我正确设置 height 属性。在 react-lazyload 的文档中，他们提到可以在没有高度的情况下使用，但它不适用于我的示例。因为我不会在根级别进行延迟加载。

而且，如果您想知道为什么我不想拥有 height 道具，因为，我不想在我的文章列表旁边看到一个巨大的滚动条。最好看到滚动条在向下滚动时变大。

下面的代码有效，但我想运行它没有 height prop.

function ArticleList({ articles }) {

    return (
        <List>
            {articles.map(article => {
                return (
                    <LazyLoad key={article.uuid} height={129}>
                        <ArticleListItem showClose={false} {...article} />
                    </LazyLoad>
                )
            })}
        </List>
    )
}

有什么解决我的问题的建议吗？

Answer 1

看起来没有什么好的方法可以在没有 height 属性的情况下使用 react-lazyload 和 react-lazy-load。解决方案对我来说是 react-lazy-load-image-component。虽然这个名字让人觉得这只是为了图片，但事实并非如此。

import React from 'react';
import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
const Component = () => (
  <div>
    <LazyLoadComponent>
      <p>I am LazyLoaded</p>
    </LazyLoadComponent>
  </div>
);
 
export default Component;

如何在没有设置高度道具的情况下使用 react-lazyload 或 react-lazy-load？

How to use react-lazyload or react-lazy-load without set height prop?

javascript

lazy-loading

reactjs

react-lazy-load