Как реализовать скролл с плавной загрузкой контента в react.js?

@keyon.brown 

Для реализации скролла с плавной загрузкой контента в React.js можно использовать пакеты, такие как react-infinite-scroll-component или react-waypoint.

Они позволяют отслеживать событие "подъезда к концу страницы" и выполнять код, когда это происходит, например, загружать новые данные.

Вот пример реализации с помощью react-infinite-scroll-component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import React from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

class Example extends React.Component {
  state = {
    items: Array.from({ length: 20 }),
    hasMore: true
  };

  fetchMoreData = () => {
    if (this.state.items.length >= 50) {
      this.setState({ hasMore: false });
      return;
    }
    // a fake async api call like which sends
    // 20 more records in 1.5 secs
    setTimeout(() => {
      this.setState({
        items: this.state.items.concat(Array.from({ length: 20 }))
      });
    }, 1500);
  };

  render() {
    return (
      <InfiniteScroll
        dataLength={this.state.items.length}
        next={this.fetchMoreData}
        hasMore={this.state.hasMore}
        loader={<h4>Loading...</h4>}
      >
        {this.state.items.map((i, index) => (
          <li key={index}>
            List item {index}
          </li>
        ))}
      </InfiniteScroll>
    );
  }
}

export default Example;

@keyon.brown 

В данном примере компонент Example использует пакет react-infinite-scroll-component для реализации бесконечной прокрутки с плавной загрузкой контента. Компонент отслеживает событие "подъезда к концу страницы" и выполняет метод fetchMoreData(), который загружает новые данные.

В методе fetchMoreData() проверяется количество загруженных элементов и устанавливается флаг hasMore в false, если было загружено достаточно данных. Далее, с помощью метода setState(), данные добавляются к существующему массиву items.

В методе render() компонент InfiniteScroll оборачивает список элементов, которые будут загружаться по мере прокрутки. В атрибутах InfiniteScroll указывается dataLength - длина массива элементов, next - функция, вызываемая при прокрутке к концу страницы, hasMore - флаг, определяющий, есть ли еще данные для загрузки, и loader - компонент, отображаемый во время загрузки новых элементов.

Таким образом, при прокрутке до конца страницы будет автоматически вызываться метод fetchMoreData(), который загрузит новые данные и добавит их к списку элементов.