Úvod do stránkovania v reakcii pomocou reagovať-paginate

Usporiadanie a zobrazovanie veľkého množstva údajov užívateľsky príjemným spôsobom zlepšuje používateľskú skúsenosť. Jednou z techník používaných na dosiahnutie tohto cieľa je stránkovanie.

V Reacte vám knižnica React-Paginate môže pomôcť zjednodušiť implementáciu.

Úvod do reakt-paginátnej knižnice

Knižnica React-Paginate uľahčuje vykreslenie stránkovania v React. Umožňuje vám uvádzať položky na stránkach a poskytuje prispôsobiteľné možnosti pre veci, ako je veľkosť strany, rozsah strán a počet strán. Má tiež vstavaný obslužný program udalostí, takže môžete písať kód, ktorý bude reagovať na zmeny stránky.

Nižšie uvidíte, ako môžete použiť response-paginate na stránkovanie údajov získaných z API.

Nastavenie projektu

Ak chcete začať, vytvorte projekt React pomocou príkazu create-react-app alebo Vite. Tento tutoriál používa Vite. Návod nájdete v tomto príspevku o ako nastaviť projekty React s Vite.

Po vytvorení projektu odstráňte časť obsahu v App.jsx, tak, aby sa zhodoval s týmto kódom:

funkciuApp() {
vrátiť (
 </div>
 );
}
exportpredvolená App;

To vám dáva čistý súbor, aby ste mohli začať pracovať s Reag-Paginate.

Nastavenie údajov

Údaje budete načítavať zo zástupného rozhrania API JSON. Toto rozhranie API poskytuje koncové body pre príspevky, komentáre, albumy, fotografie, úlohy a používateľov. Prostredníctvom koncového bodu príspevkov budete získať údaje z API pomocou Axios, knižnica klienta HTTP.

Ak chcete začať, nainštalujte Axios pomocou tohto príkazu terminálu:

npm nainštalujte axios

Ďalej importujte hák useEffect a knižnicu axios v hornej časti App.jsxa potom načítajte príspevky z rozhrania API, ako je uvedené nižšie.

importovať axios od"axios";
importovať { useEffect, useState } od"reagovať";
funkciuApp() {
konšt [data, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').potom((odpoveď) => {
 setData (response.data);
 });
 }, []);
vrátiť (

 </div>
 );
}
exportpredvolená App;

Hák useState inicializuje stavovú premennú s názvom data s prázdnym poľom. Na aktualizáciu stavu, keď API vráti príspevky, použijete funkciu setData.

Implementácia stránkovania pomocou funkcie Reagovať

Teraz, keď ste nastavili projekt a načítali údaje, je čas pridať stránkovanie pomocou funkcie Reagovať. Nižšie sú uvedené kroky, ktoré by ste mali dodržiavať:

1. Nainštalujte si reagovať stránku

Spustite nasledujúci príkaz, aby ste nainštalovali response-paginate pomocou npm.

npm install reagovat-paginate

2. Nastavte počiatočný stav stránok

Použite háčik useState na sledovanie aktuálnej stránky a celkového počtu strán.

konšt [currentPage, setCurrentPage] = useState(0);
konšt [totalPages, setTotalPages] = useState(0);

Mali by ste tiež určiť celkový počet položiek, ktoré môže stránka obsahovať.

konšt itemsPerPage = 10

V háku useEffect pridajte nasledujúci riadok na výpočet celkového počtu strán na základe dĺžky údajov a počtu položiek na stranu. Potom ho uložte do stavovej premennej totalPages.

setTotalPages(Matematika.ceil (response.data.length / itemsPerPage));

Váš háčik useEffect by mal teraz vyzerať takto:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').potom((odpoveď) => {
 setData (response.data);
 setTotalPages(Matematika.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Definujte funkciu na spracovanie zmien stránky

Najprv definujte premenné startIndex, endIndex a podmnožinu na vykreslenie podmnožiny údajov na základe aktuálneho čísla strany.

konšt startIndex = currentPage * itemsPerPage;
konšt endIndex = počiatočný index + položky na stránke;
konšt podmnožina = data.slice (startIndex, endIndex);

Tento kód vypočíta hodnoty startIndex a endIndex na základe hodnoty stavu currentPage a hodnoty itemsPerPage. Potom použije tieto premenné na rozdelenie dátového poľa na podmnožinu položiek.

Potom pridajte funkciu handlePageChange. Toto je obsluha udalosti, ktorá sa spustí, keď používateľ klikne na tlačidlo Ďalej.

konšt handlePageChange = (vybratá stránka) => {
 setCurrentPage (selectedPage.selected);
};

Celkovo by vaša aplikácia mala vyzerať takto:

importovať axios od"axios";
importovať { useEffect, useState } od"reagovať";
funkciuApp() {
konšt [data, setData] = useState([]);
konšt [currentPage, setCurrentPage] = useState(0);
konšt [totalPages, setTotalPages] = useState(0);
konšt itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').potom((odpoveď) => {
 setData (response.data);
 });
 setTotalPages(Matematika.ceil (response.data.length / itemsPerPage));
 }, []);
konšt startIndex = currentPage * itemsPerPage;
konšt endIndex = počiatočný index + položky na stránke;
konšt podmnožina = data.slice (startIndex, endIndex);
konšt handlePageChange = (vybratá stránka) => {
 setCurrentPage (selectedPage.selected);
 };
vrátiť (

 </div>
 );
}
exportpredvolená App;

4. Pridať stránkovanie

Posledným krokom je vykreslenie stránok pomocou komponentu ReactPaginate. Do príkazu return pridajte nasledujúce a nahraďte prázdne div.

 {subset.map((položka) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={currentPage}
 />
</div>

Toto iteruje cez položky v aktuálnej podmnožine a vykreslí ich a odovzdá rekvizity pageCount, onPageChange a forceChange do ReactPaginate.

Prispôsobenie reakčnej stránky

Reag-paginate poskytuje niekoľko rekvizít, ktoré vám umožňujú prispôsobiť vzhľad a dojem komponentu stránkovania tak, aby vyhovoval potrebám vašej aplikácie.

Tu je niekoľko príkladov.

• Prispôsobte si nasledujúce a predchádzajúce tlačidlá pomocou rekvizít previousLabel a nextLabel. Môžete napríklad použiť štítky so šípkou, ako je uvedené nižšie.

   previousLabel={"<}
   nextLabel={">>"}
  />
  

• Prispôsobte štítok prerušenia pomocou rekvizity breakLabel. Označenie prerušenia je označenie, ktoré sa zobrazí, keď je počet stránok vysoký a komponent stránkovania nedokáže zobraziť všetky odkazy na stránku. Namiesto toho sa medzi prepojeniami zobrazí prerušenie, ktoré predstavuje označenie prerušenia. Tu je príklad, ktorý používa elipsu.

   breakLabel={"..."}
  />
  

• Prispôsobte počet stránok, ktoré sa majú zobraziť. Ak nechcete zobraziť všetky strany, môžete určiť počet strán pomocou rekvizity pageCount. Nižšie uvedený kód určuje počet strán ako 5.

   pageCount={5}
  />
  

• Prispôsobenie kontajnera a aktívnych tried. Názvy tried pre kontajner stránkovania a odkaz na aktívnu stránku môžete prispôsobiť pomocou rekvizít containerClassName a activeClassName. Potom môžete upravovať štýl komponentu stránkovania pomocou týchto tried, kým nebude zodpovedať vzhľadu vašej aplikácie.

   containerClassName={"stránkovací kontajner"}
   activeClassName={"aktívna stránka"}
  />
  

Toto nie je úplný zoznam dostupných možností prispôsobenia. Zvyšok nájdete v reagovať-stránkovať dokumenty knižnice.

Zlepšite používateľskú skúsenosť pomocou stránkovania

Stránkovanie je dôležitá funkcia v každej aplikácii, ktorá zobrazuje veľké množstvo údajov. Bez stránkovania musia používatelia prechádzať dlhými zoznamami, aby našli informácie, ktoré potrebujú, čo je časovo náročné.

Stránkovanie umožňuje používateľom jednoducho prechádzať ku konkrétnym údajom, ktoré hľadajú, ich rozdelením na menšie, lepšie spravovateľné časti. To nielen šetrí čas, ale tiež uľahčuje používateľom spracovanie informácií.