Увод у пагинацију у Реацт-у помоћу реацт-пагинате

Организовање и приказивање великих количина података на начин прилагођен кориснику побољшава корисничко искуство. Једна техника која се користи да се то постигне је пагинација.

У Реацт-у, библиотека реацт-пагинате може вам помоћи да поједноставите имплементацију.

Увод у реацт-пагинате библиотеку

Реацт-пагинате библиотека олакшава приказивање пагинације у Реацт-у. Омогућава вам да наведете ставке на страницама и пружа прилагодљиве опције за ствари као што су величина странице, опсег страница и број страница. Такође има уграђени руковалац догађаја тако да можете написати код да одговорите на промене странице.

У наставку ћете видети како можете да користите реацт-пагинате за пагинацију података преузетих из АПИ-ја.

Постављање пројекта

За почетак креирајте Реацт пројекат користећи команду цреате-реацт-апп или Вите. Овај водич користи Вите. Упутства можете пронаћи у овом посту о

Када направите пројекат, избришите део садржаја у Апп.јск, тако да одговара овом коду:

функцијаАпликација() {
повратак (
 </div>
 );
}
извозУобичајено Апликација;

Ово вам даје чисту датотеку за почетак рада са реацт-пагинате.

Подешавање података

Дохватаћете податке из ЈСОН АПИ-ја чувара места. Овај АПИ обезбеђује крајње тачке за постове, коментаре, албуме, фотографије, задатке и кориснике. Преко крајње тачке постова, ви ћете преузима податке из АПИ-ја користећи Акиос, ХТТП клијентска библиотека.

Да бисте започели, инсталирајте Акиос користећи ову наредбу терминала:

нпм инсталл акиос

Затим увезите усеЕффецт хоок и акиос библиотеку на врху Апп.јск, а затим преузмите постове из АПИ-ја као што је приказано испод.

увоз акиос из"аксиос";
увоз { усеЕффецт, усеСтате } из"реаговати";
функцијаАпликација() {
конст [дата, сетДата] = усеСтате([]);

 усеЕффецт(() => {
 акиос.гет(' https://jsonplaceholder.typicode.com/posts').онда((одговор) => {
 сетДата (респонсе.дата);
 });
 }, []);
повратак (

 </div>
 );
}
извозУобичајено Апликација;

УсеСтате кука иницијализује променљиву стања која се зове подаци са празним низом. Користићете функцију сетДата да ажурирате стање када АПИ врати постове.

Имплементација пагинације са реацт-пагинате

Сада када сте подесили пројекат и преузели податке, време је да додате пагинацију помоћу реацт-пагинате. У наставку су кораци које треба да пратите:

1. Инсталирајте реацт-пагинате

Покрените следећу команду да бисте инсталирали реацт-пагинате користећи нпм.

нпм инсталл реацт-пагинате

2. Подесите почетно стање страница

Користите куку усеСтате да бисте пратили тренутну страницу и укупан број страница.

конст [цуррентПаге, сетЦуррентПаге] = усеСтате(0);
конст [тоталПагес, сетТоталПагес] = усеСтате(0);

Такође би требало да наведете укупан број ставки које страница може да има.

конст итемсПерПаге = 10

У куку усеЕффецт додајте следећи ред да бисте израчунали укупан број страница на основу дужине података и броја ставки по страници. Затим га сачувајте у променљивој стања тоталПагес.

сетТоталПагес(Матх.цеил (респонсе.дата.ленгтх / итемсПерПаге));

Ваша усеЕффецт кука би сада требала изгледати овако:

усеЕффецт(() => {
 акиос.гет(' https://jsonplaceholder.typicode.com/posts').онда((одговор) => {
 сетДата (респонсе.дата);
 сетТоталПагес(Матх.цеил (респонсе.дата.ленгтх / итемсПерПаге))
 });
 }, []);

3. Дефинишите функцију за руковање променама странице

Прво дефинишите променљиве стартИндек, ендИндек и подскуп да бисте приказали подскуп података на основу броја тренутне странице.

конст стартИндек = цуррентПаге * итемсПерПаге;
конст ендИндек = стартИндек + итемсПерПаге;
конст подскуп = дата.слице (стартИндек, ендИндек);

Овај код израчунава вредности стартИндек и ендИндек на основу вредности статуса цуррентПаге и вредности итемсПерПаге. Затим користи ове варијабле да исече низ података у подскуп ставки.

Затим додајте функцију хандлеПагеЦханге. Ово је руковалац догађаја који ће се покренути када корисник кликне на дугме Даље.

конст хандлеПагеЦханге = (селецтедПаге) => {
 сетЦуррентПаге (селецтедПаге.селецтед);
};

Све у свему, ваша апликација би требало да изгледа овако:

увоз акиос из"аксиос";
увоз { усеЕффецт, усеСтате } из"реаговати";
функцијаАпликација() {
конст [дата, сетДата] = усеСтате([]);
конст [цуррентПаге, сетЦуррентПаге] = усеСтате(0);
конст [тоталПагес, сетТоталПагес] = усеСтате(0);
конст итемсПерПаге = 10;
 усеЕффецт(() => {
 акиос.гет(' https://jsonplaceholder.typicode.com/posts/').онда((одговор) => {
 сетДата (респонсе.дата);
 });
 сетТоталПагес(Матх.цеил (респонсе.дата.ленгтх / итемсПерПаге));
 }, []);
конст стартИндек = цуррентПаге * итемсПерПаге;
конст ендИндек = стартИндек + итемсПерПаге;
конст подскуп = дата.слице (стартИндек, ендИндек);
конст хандлеПагеЦханге = (селецтедПаге) => {
 сетЦуррентПаге (селецтедПаге.селецтед);
 };
повратак (

 </div>
 );
}
извозУобичајено Апликација;

4. Додајте пагинацију

Последњи корак је рендеровање страница помоћу компоненте РеацтПагинате. Додајте следеће наредби ретурн, замењујући празно див.

 {субсет.мап((предмет) => (
{итем.титле}</div>
 ))}
 пагеЦоунт={тоталПагес}
 онПагеЦханге={хандлеПагеЦханге}
 форцеПаге={цуррентПаге}
 />
</div>

Ово понавља ставке у тренутном подскупу и приказује их и прослеђује пропс пагеЦоунт, онПагеЦханге и форцеЦханге у РеацтПагинате.

Прилагођавање реацт-пагинате

реацт-пагинате пружа неколико реквизита који вам омогућавају да прилагодите изглед и осећај компоненте пагинације тако да одговара потребама ваше апликације.

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

• Прилагодите следеће и претходно дугме користећи реквизите превиоусЛабел и нектЛабел. На пример, можете користити шевронске ознаке као што је приказано у наставку.

   превиоусЛабел={"<}
   нектЛабел={">>"}
  />
  

• Прилагодите ознаку бреак користећи бреакЛабел проп. Ознака прелома је ознака која се приказује када је број страница велики, а компонента пагинације није у стању да прикаже све везе на страници. Уместо тога, приказује паузу, представљену ознаком паузе, између веза. Ево примера који користи три тачке.

   бреакЛабел={"..."}
  />
  

• Прилагодите број страница за приказ. Ако не желите да прикажете све странице, можете да одредите број страница помоћу параметра пагеЦоунт. Код испод наводи број страница као 5.

   пагеЦоунт={5}
  />
  

• Прилагођавање контејнера и активних класа. Можете да прилагодите имена класа за контејнер за пагинацију и везу активне странице користећи реквизите цонтаинерЦлассНаме и ацтивеЦлассНаме. Затим можете да стилизујете компоненту пагинације користећи ове класе док се не уклопи у изглед ваше апликације.

   цонтаинерЦлассНаме={"пагинатион-цонтаинер"}
   ацтивеЦлассНаме={"активна страница"}
  />
  

Ово није потпуна листа доступних опција прилагођавања. Остатак можете пронаћи у реацт-пагинате библиотечки документи.

Побољшајте корисничко искуство коришћењем пагинације

Пагинација је важна карактеристика у свакој апликацији која приказује велике количине података. Без пагинације, корисници морају да се крећу кроз дугачке листе да би пронашли информације које су им потребне, што одузима много времена.

Пагинација омогућава корисницима да лако дођу до специфичних података које траже тако што их разбију на мање делове којима се лакше управља. Ово не само да штеди време, већ и олакшава корисницима обраду информација.