Введение в пагинацию в React с использованием react-paginate

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

В React библиотека react-paginate может помочь вам упростить реализацию.

Введение в библиотеку react-paginate

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

Ниже вы увидите, как можно использовать react-paginate для разбиения на страницы данных, полученных из API.

Настройка проекта

Для начала создайте проект React с помощью команды create-react-app или Vite. В этом руководстве используется Vite. Вы можете найти инструкции в этом посте о

Создав проект, удалите часть содержимого в App.jsx., чтобы он соответствовал этому коду:

функцияПриложение() {
возвращаться (
 </div>
 );
}
экспортпо умолчанию Приложение;

Это дает вам чистый файл для начала работы с react-paginate.

Настройка данных

Вы будете получать данные из API-заполнителя JSON. Этот API предоставляет конечные точки для сообщений, комментариев, альбомов, фотографий, задач и пользователей. Через конечную точку сообщений вы получать данные из API с помощью Axios, клиентская библиотека HTTP.

Для начала установите Axios с помощью этой команды терминала:

npm установить аксиомы

Затем импортируйте хук useEffect и библиотеку axios в верхней части App.jsx, затем получите сообщения из API, как показано ниже.

Импортировать аксиомы от"аксиос";
Импортировать { useEffect, useState } от"реагировать";
функцияПриложение() {
константа [данные, setData] = useState([]);

 использоватьЭффект(() => {
 аксиос.получить(' https://jsonplaceholder.typicode.com/posts').затем((ответ) => {
 setData(ответ.данные);
 });
 }, []);
возвращаться (

 </div>
 );
}
экспортпо умолчанию Приложение;

Хук useState инициализирует переменную состояния, называемую данными, с пустым массивом. Вы будете использовать функцию setData для обновления состояния, когда API возвращает сообщения.

Реализация пагинации с помощью react-paginate

Теперь, когда вы настроили проект и получили данные, пришло время добавить разбиение на страницы с помощью react-paginate. Ниже приведены шаги, которые вы должны выполнить:

1. Установить реакцию-разбиение на страницы

Выполните следующую команду, чтобы установить react-paginate используя нпм.

npm установить реакцию-разбиение на страницы

2. Установите начальное состояние страниц

Используйте хук useState, чтобы отслеживать текущую страницу и общее количество страниц.

константа [текущая страница, setCurrentPage] = useState (0);
константа [всего страниц, setTotalPages] = useState (0);

Вы также должны указать общее количество элементов, которые может иметь страница.

константа элементов на странице = 10

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

установитьВсегоСтраниц(Математика.ceil(response.data.length/itemsPerPage));

Теперь ваш хук useEffect должен выглядеть так:

использоватьЭффект(() => {
 аксиос.получить(' https://jsonplaceholder.typicode.com/posts').затем((ответ) => {
 setData(ответ.данные);
 установитьВсегоСтраниц(Математика.ceil(response.data.length/itemsPerPage))
 });
 }, []);

3. Определите функцию для обработки изменений страницы

Сначала определите переменные startIndex, endIndex и подмножество для отображения подмножества данных на основе текущего номера страницы.

константа startIndex = текущая страница * элементы на странице;
константа endIndex = startIndex + элементы на странице;
константа подмножество = data.slice(startIndex, endIndex);

Этот код вычисляет значения startIndex и endIndex на основе значения состояния currentPage и значения itemsPerPage. Затем он использует эти переменные для разделения массива данных на подмножество элементов.

Затем добавьте функцию handlePageChange. Это обработчик событий, который запускается, когда пользователь нажимает кнопку «Далее».

константа обработать изменение страницы = (выбранная страница) => {
 setCurrentPage(selectedPage.selected);
};

В целом ваше приложение должно выглядеть так:

Импортировать аксиомы от"аксиос";
Импортировать { useEffect, useState } от"реагировать";
функцияПриложение() {
константа [данные, setData] = useState([]);
константа [текущая страница, setCurrentPage] = useState (0);
константа [всего страниц, setTotalPages] = useState (0);
константа элементов на странице = 10;
 использоватьЭффект(() => {
 аксиос.получить(' https://jsonplaceholder.typicode.com/posts/').затем((ответ) => {
 setData(ответ.данные);
 });
 установитьВсегоСтраниц(Математика.ceil(response.data.length/itemsPerPage));
 }, []);
константа startIndex = текущая страница * элементы на странице;
константа endIndex = startIndex + элементы на странице;
константа подмножество = data.slice(startIndex, endIndex);
константа обработать изменение страницы = (выбранная страница) => {
 setCurrentPage(selectedPage.selected);
 };
возвращаться (

 </div>
 );
}
экспортпо умолчанию Приложение;

4. Добавить пагинацию

Последний шаг — отрисовка страниц с помощью компонента ReactPaginate. Добавьте следующее в оператор return, заменив пустой див.

 {подмножество.карта ((элемент) => (
{элемент.название}</div>
 ))}
 pageCount={всего страниц}
 onPageChange={handlePageChange}
 forcePage = {текущая страница}
 />
</div>

Это перебирает элементы в текущем подмножестве, отображает их и передает реквизиты pageCount, onPageChange и forceChange в ReactPaginate.

Настройка реакции на страницы

react-paginate предоставляет несколько реквизитов, которые позволяют настроить внешний вид компонента разбивки на страницы в соответствии с потребностями вашего приложения.

Вот некоторые примеры.

• Настройте кнопки «Далее» и «Предыдущий», используя реквизиты previousLabel и nextLabel. Например, вы можете использовать шевронные метки, как показано ниже.

   предыдущая метка = {"<}
   следующая метка = {">>"}
  />
  

• Настройте метку разрыва, используя реквизит breakLabel. Метка разрыва — это метка, отображаемая, когда количество страниц велико, а компонент разбивки на страницы не может отобразить все ссылки на страницы. Вместо этого он отображает разрыв между ссылками, представленный меткой разрыва. Вот пример, в котором используется многоточие.

   breakLabel={"..."}
  />
  

• Настройте количество отображаемых страниц. Если вы не хотите отображать все страницы, вы можете указать количество страниц, используя свойство pageCount. Код ниже указывает количество страниц как 5.

   pageCount={5}
  />
  

• Настройка контейнера и активных классов. Вы можете настроить имена классов для контейнера разбиения на страницы и ссылки на активную страницу, используя свойства containerClassName и activeClassName соответственно. Затем вы можете стилизовать компонент разбивки на страницы, используя эти классы, пока он не будет соответствовать внешнему виду вашего приложения.

   имя_контейнера_класса={"контейнер разбиения на страницы"}
   имяактивногокласса={"активная страница"}
  />
  

Это не исчерпывающий список доступных параметров настройки. Остальные вы можете найти в Документы библиотеки react-paginate.

Улучшите взаимодействие с пользователем, используя разбиение на страницы

Разбивка на страницы — важная функция любого приложения, отображающего большие объемы данных. Без нумерации страниц пользователям приходится прокручивать длинные списки, чтобы найти нужную им информацию, что отнимает много времени.

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