Пагинация - это процесс разбиения большого множества данных на отдельные страницы с ограниченным количеством элементов. В 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
, которая будет вызываться при смене страницы.