Странирането е полезна техника, от която могат да се възползват повечето приложения, натоварени с данни. Библиотеката react-paginate ви помага да опростите този процес.

Организирането и показването на големи количества данни по удобен за потребителя начин подобрява потребителското изживяване. Една техника, използвана за постигане на това, е пагинацията.

В React библиотеката react-paginate може да ви помогне да опростите внедряването.

Въведение в React-paginate Library

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

По-долу ще видите как можете да използвате react-paginate за пагиниране на данни, извлечени от API.

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

За да започнете, създайте React проект, като използвате командата create-react-app или Vite. Този урок използва Vite. Можете да намерите инструкциите в тази публикация за

instagram viewer
как да настроите React проекти с Vite.

След като създадете проекта, изтрийте част от съдържанието в App.jsx, така че да съответства на този код:

функцияПриложение() {
връщане (
 </div>
 );
}
износпо подразбиране Приложение;

Това ви дава чист файл, за да започнете да работите с react-paginate.

Настройка на данните

Ще извличате данни от API за JSON заместител. Този API предоставя крайни точки за публикации, коментари, албуми, снимки, задачи и потребители. Чрез крайната точка на публикации ще извличане на данни от API с помощта на Axios, HTTP клиентска библиотека.

За да започнете, инсталирайте Axios, като използвате тази терминална команда:

npm инсталирайте axios

След това импортирайте куката useEffect и библиотеката axios в горната част на App.jsx, след това изтеглете публикациите от API, както е показано по-долу.

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

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').тогава((отговор) => {
 setData (response.data);
 });
 }, []);


връщане (


 </div>
 );
}
износпо подразбиране Приложение;

Куката useState инициализира променлива на състоянието, наречена data, с празен масив. Ще използвате функцията setData, за да актуализирате състоянието, когато API върне публикациите.

Внедряване на страниране с react-paginate

Сега, след като сте настроили проекта и сте извлекли данните, е време да добавите пагинация с помощта на react-paginate. По-долу са стъпките, които трябва да следвате:

1. Инсталирайте react-paginate

Изпълнете следната команда, за да инсталирате react-paginate използвайки npm.

npm инсталирате реагиране на страници

2. Задайте първоначалното състояние на страниците

Използвайте куката useState, за да следите текущата страница и общия брой страници.

конст [currentPage, setCurrentPage] = useState(0);
конст [totalPages, setTotalPages] = useState(0);

Трябва също да посочите общия брой елементи, които една страница може да съдържа.

конст itemsPerPage = 10

В куката useEffect добавете следния ред, за да изчислите общия брой страници въз основа на дължината на данните и броя елементи на страница. След това го запазете в променливата на състоянието totalPages.

setTotalPages(математика.ceil (response.data.length / itemsPerPage));

Вашата кука useEffect сега трябва да изглежда така:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').тогава((отговор) => {
 setData (response.data);
 setTotalPages(математика.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Дефинирайте функция за обработка на промените на страницата

Първо дефинирайте променливите startIndex, endIndex и subset, за да изобразите подмножеството от данни въз основа на текущия номер на страница.

конст startIndex = currentPage * itemsPerPage;
конст endIndex = startIndex + itemsPerPage;
конст подмножество = data.slice (startIndex, endIndex);

Този код изчислява стойностите startIndex и endIndex въз основа на стойността на състоянието на currentPage и стойността itemsPerPage. След това използва тези променливи, за да раздели масива от данни на подмножество от елементи.

След това добавете функцията handlePageChange. Това е манипулатор на събития, който ще се стартира, когато потребител щракне върху бутона Напред.

конст handlePageChange = (избрана страница) => {
 setCurrentPage (selectedPage.selected);
};

Като цяло вашето приложение трябва да изглежда така:

импортиране аксиос от"аксиос";
импортиране {useEffect, useState} от"реагира";
функцияПриложение() {
конст [данни, setData] = useState([]);
конст [currentPage, setCurrentPage] = useState(0);
конст [totalPages, setTotalPages] = useState(0);
конст itemsPerPage = 10;


 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').тогава((отговор) => {
 setData (response.data);
 });


 setTotalPages(математика.ceil (response.data.length / itemsPerPage));
 }, []);


конст startIndex = currentPage * itemsPerPage;
конст endIndex = startIndex + itemsPerPage;
конст подмножество = data.slice (startIndex, endIndex);


конст handlePageChange = (избрана страница) => {
 setCurrentPage (selectedPage.selected);
 };


връщане (


 </div>
 );
}
износпо подразбиране Приложение;

4. Добавете пагинация

Последната стъпка е да изобразите страниците с помощта на компонента ReactPaginate. Добавете следното към израза за връщане, като замените празното див.



 {subset.map((вещ) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={currentPage}
 />
</div>

Това итерира елементите в текущото подмножество и ги изобразява и предава реквизитите pageCount, onPageChange и forceChange на ReactPaginate.

Персонализиране на реакция-страниране

react-paginate предоставя няколко подпори, които ви позволяват да персонализирате външния вид и усещането на компонента за страниране, за да отговаря на нуждите на вашето приложение.

Ето няколко примера.

  • Персонализирайте следващите и предишните бутони, като използвате реквизитите previousLabel и nextLabel. Например можете да използвате шевронни етикети, както е показано по-долу.
     previousLabel={"<}
     nextLabel={">>"}
    />
  • Персонализирайте етикета за прекъсване, като използвате подложката breakLabel. Етикетът за прекъсване е етикетът, който се показва, когато броят на страниците е висок и компонентът за пагиниране не може да покаже всички връзки към страницата. Вместо това той показва прекъсване, представено от етикета за прекъсване, между връзките. Ето един пример, който използва многоточие.
     breakLabel={"..."}
    />
  • Персонализирайте броя на страниците за показване. Ако не искате да показвате всички страници, можете да посочите броя на страниците, като използвате подложката pageCount. Кодът по-долу определя броя на страниците като 5.
     pageCount={5}
    />
  • Персонализиране на контейнера и активните класове. Можете да персонализирате имената на класовете за контейнера за страниране и активната връзка към страницата, като използвате реквизитите за containerClassName и activeClassName, съответно. След това можете да стилизирате компонента за страниране, като използвате тези класове, докато пасне на външния вид на вашето приложение.
     containerClassName={"pagination-container"}
     activeClassName={"активна страница"}
    />

Това не е изчерпателен списък на наличните опции за персонализиране. Останалите можете да намерите в react-paginate библиотечни документи.

Подобрете потребителското изживяване чрез използване на пагинация

Страницирането е важна функция във всяко приложение, което показва големи количества данни. Без пагинация потребителите трябва да превъртат през дълги списъци, за да намерят информацията, от която се нуждаят, което отнема много време.

Пагинацията позволява на потребителите лесно да навигират до конкретните данни, които търсят, като ги разделят на по-малки, по-управляеми части. Това не само спестява време, но и улеснява обработката на информацията от потребителите.