时间戳

首页 > 解决方案 > 如何在没有设置高度道具的情况下使用 react-lazyload 或 react-lazy-load？

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

问题描述

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

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

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

function ArticleList({ articles }) {

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

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

标签： javascriptreactjslazy-loadingreact-lazy-load

解决方案

看起来没有任何好的使用方法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;

推荐阅读