Как лучше делать пагинацию на React?

Пагинация - это процесс разбиения большого множества данных на отдельные страницы с ограниченным количеством элементов. В React существует несколько способов реализации пагинации, и выбор зависит от конкретных требований и применяемых технологий.

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

Вот пример такого компонента:

import React, { useState, useEffect } from 'react';

const Pagination = ({ data, itemsPerPage, onPageChange }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);

  useEffect(() => {
    const totalPagesCount = Math.ceil(data.length / itemsPerPage);
    setTotalPages(totalPagesCount);
  }, [data, itemsPerPage]);

  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
    onPageChange(pageNumber);
  };

  const renderPagination = () => {
    const pagination = [];
    for (let i = 1; i <= totalPages; i++) {
      pagination.push(
        <li key={i} onClick={() => handlePageChange(i)}>
          {i}
        </li>
      );
    }
    return pagination;
  };

  const renderData = () => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const currentData = data.slice(startIndex, endIndex);
    return currentData.map((item) => <div key={item.id}>{item.name}</div>);
  };

  return (
    <div>
      {renderData()}
      <ul>{renderPagination()}</ul>
    </div>
  );
};

export default Pagination;

Этот компонент принимает следующие пропсы:
- data - массив данных, который нужно отобразить с пагинацией;
- itemsPerPage - количество элементов на одной странице;
- onPageChange - функция обратного вызова, которая будет вызываться при смене страницы.

Внутри компонента мы используем хук useState для хранения текущей страницы и общего количества страниц. Хук useEffect используется для вычисления общего количества страниц каждый раз, когда меняется массив данных или количество отображаемых элементов на странице.

Обработчик handlePageChange обновляет текущую страницу и вызывает функцию обратного вызова onPageChange, передавая ей номер выбранной страницы.

Метод renderPagination создает массив элементов списка с номерами страниц, которые можно выбирать. Каждый элемент списка кликабелен и при клике вызывается метод handlePageChange, передавая ему номер выбранной страницы.

Метод renderData отображает нужные данные на текущей странице путем извлечения и отображения соответствующего среза данных из массива data.

Возвращаемый JSX включает отображение данных с пагинацией и список с номерами страниц.

Чтобы использовать компонент пагинации, просто передайте соответствующие данные, количество элементов на странице и функцию обратного вызова следующим образом:

const App = () => {
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    // ...
  ];

  const handlePageChange = (pageNumber) => {
    // Обработка изменения страницы, например, загрузка данных с сервера
  };

  return (
    <Pagination data={data} itemsPerPage={5} onPageChange={handlePageChange} />
  );
};

export default App;

В этом примере мы передаем массив данных, указываем, что на каждой странице должно быть отображено 5 элементов, и определяем функцию обратного вызова handlePageChange, которая будет вызываться при смене страницы.