Как использовать response-lazyload или react-lazy-load без заданной высоты? - PullRequest
Новая
       59

Как использовать response-lazyload или react-lazy-load без заданной высоты?

0 голосов
/ 06 августа 2020

Я хочу отложить загрузку компонента списка статей, но оба react-lazyload и react-lazy-load заставляют меня правильно установить height prop. В документации к react-lazyload упоминается, что можно использовать без высоты, но в моем примере это не работает. Потому что я не лениво загружаю на уровне root.

И, если вам интересно, почему я не хочу иметь height prop, потому что я не хочу видеть рядом огромную полосу прокрутки к моему списку статей. Лучше видеть, как полоса прокрутки увеличивается при прокрутке вниз.

Приведенный ниже код работает, но я хочу запустить его без height prop. 

function ArticleList({ articles }) {

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

Какие-либо рекомендации по решению моей проблемы?

1 Ответ

0 голосов
/ 07 августа 2020

Похоже, что нет хорошего способа использовать react-lazyload и react-lazy-load без height prop. Решением для меня было 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;
...