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

Question

我想延迟加载一个文章列表组件，但是react-lazyload和react-lazy-load都要求我正确地设置height属性。在react-lazyload的文档中，他们提到可以在没有高度的情况下使用，但在我的示例中不起作用。因为我不会在根级别上偷懒。

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

下面的代码工作正常，但我想在没有height属性的情况下运行它。

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;