如何在没有设置高度道具的情况下使用 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';

 

const Component = () => (

  <div>

    <LazyLoadComponent>

      <p>I am LazyLoaded</p>

    </LazyLoadComponent>

  </div>

);

 

export default Component;