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

Question

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

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

下面的代码正在运行，但我想在没有heightprop 的情况下运行它。

function ArticleList({ articles }) {

    return (

        <List>

            {articles.map(article => {

                return (

                    <LazyLoad key={article.uuid} height={129}>

                        <ArticleListItem showClose={false} {...article} />

                    </LazyLoad>

                )

            })}

        </List>

    )

}

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

Answer 1

看起来没有什么好的方法可以使用react-lazyload并且react-lazy-load没有height道具。解决方案对我来说是 react-lazy-load-image-component 。虽然这个名字让人觉得这只适用于图像，但事实并非如此。import React from 'react';import { LazyLoadComponent } from 'react-lazy-load-image-component';&nbsp;const Component = () => (&nbsp; <div>&nbsp; &nbsp; <LazyLoadComponent>&nbsp; &nbsp; &nbsp; <p>I am LazyLoaded</p>&nbsp; &nbsp; </LazyLoadComponent>&nbsp; </div>);&nbsp;export default Component;