Uvod v paginacijo v Reactu z uporabo react-paginate

Organiziranje in prikaz velikih količin podatkov na uporabniku prijazen način izboljša uporabniško izkušnjo. Ena od tehnik, ki se uporablja za dosego tega, je paginacija.

V Reactu vam knjižnica react-paginate lahko pomaga poenostaviti implementacijo.

Uvod v knjižnico react-paginate

Knjižnica react-paginate olajša upodabljanje paginacije v Reactu. Omogoča vam, da seznam elementov na straneh in nudi prilagodljive možnosti za stvari, kot so velikost strani, obseg strani in število strani. Ima tudi vgrajeno obravnavo dogodkov, tako da lahko napišete kodo za odziv na spremembe strani.

Spodaj boste videli, kako lahko uporabite react-paginate za ostranjevanje podatkov, pridobljenih iz API-ja.

Nastavitev projekta

Za začetek ustvarite projekt React z ukazom create-react-app ali Vite. Ta vadnica uporablja Vite. Navodila najdete v tej objavi o kako nastaviti projekte React z Vite.

Ko ustvarite projekt, izbrišite nekaj vsebine v App.jsx, tako da se ujema s to kodo:

funkcijoaplikacija() {
vrnitev (
 </div>
 );
}
izvozprivzeto aplikacija;

To vam daje čisto datoteko za začetek dela z react-paginate.

Nastavitev podatkov

Podatke boste pridobili iz API-ja JSON placeholder. Ta API zagotavlja končne točke za objave, komentarje, albume, fotografije, opravila in uporabnike. Prek končne točke objav boste pridobivanje podatkov iz API-ja z uporabo Axios, odjemalska knjižnica HTTP.

Za začetek namestite Axios s tem terminalskim ukazom:

npm namestite axios

Nato uvozite kljuko useEffect in knjižnico axios na vrhu App.jsx, nato prenesite objave iz API-ja, kot je prikazano spodaj.

uvoz axios od"aksios";
uvoz {useEffect, useState} od"reagirati";
funkcijoaplikacija() {
konst [podatki, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').potem((odgovor) => {
 setData (response.data);
 });
 }, []);
vrnitev (

 </div>
 );
}
izvozprivzeto aplikacija;

Kavelj useState inicializira spremenljivko stanja, imenovano data, s prazno matriko. Funkcijo setData boste uporabili za posodobitev stanja, ko API vrne objave.

Implementacija paginacije z react-paginate

Zdaj, ko ste nastavili projekt in pridobili podatke, je čas, da dodate paginacijo z uporabo react-paginate. Spodaj so navedeni koraki, ki jih morate upoštevati:

1. Namestite react-paginate

Zaženite naslednji ukaz za namestitev react-paginate z uporabo npm.

npm namestite react-paginate

2. Nastavite začetno stanje strani

Za spremljanje trenutne strani in skupnega števila strani uporabite kavelj useState.

konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);

Določiti morate tudi skupno število elementov, ki jih lahko vsebuje stran.

konst itemsPerPage = 10

V kavelj useEffect dodajte naslednjo vrstico za izračun skupnega števila strani na podlagi dolžine podatkov in števila elementov na stran. Nato ga shranite v spremenljivko stanja totalPages.

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

Vaš useEffect kavelj bi moral zdaj izgledati takole:

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

3. Definirajte funkcijo za obravnavanje sprememb strani

Najprej definirajte spremenljivke startIndex, endIndex in podnabor, da upodobite podnabor podatkov na podlagi trenutne številke strani.

konst startIndex = trenutna stran * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst podnabor = data.slice (startIndex, endIndex);

Ta koda izračuna vrednosti startIndex in endIndex na podlagi vrednosti stanja currentPage in vrednosti itemsPerPage. Nato s temi spremenljivkami razdeli podatkovno matriko na podnabor elementov.

Nato dodajte funkcijo handlePageChange. To je urejevalnik dogodkov, ki se zažene, ko uporabnik klikne gumb Naprej.

konst handlePageChange = (izbrana stran) => {
 setCurrentPage (selectedPage.selected);
};

Vaša prijava bi morala skupaj izgledati takole:

uvoz axios od"aksios";
uvoz {useEffect, useState} od"reagirati";
funkcijoaplikacija() {
konst [podatki, setData] = useState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').potem((odgovor) => {
 setData (response.data);
 });
 setTotalPages(matematika.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = trenutna stran * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst podnabor = data.slice (startIndex, endIndex);
konst handlePageChange = (izbrana stran) => {
 setCurrentPage (selectedPage.selected);
 };
vrnitev (

 </div>
 );
}
izvozprivzeto aplikacija;

4. Dodaj paginacijo

Zadnji korak je upodabljanje strani s komponento ReactPaginate. Stavku vrnitve dodajte naslednje in zamenjajte prazno div.

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

To ponovi elemente v trenutni podnaboru in jih upodobi ter posreduje rekvizite pageCount, onPageChange in forceChange v ReactPaginate.

Prilagajanje react-paginate

react-paginate ponuja več rekvizitov, ki vam omogočajo, da prilagodite videz in občutek komponente za označevanje strani, da ustreza potrebam vaše aplikacije.

Tukaj je nekaj primerov.

• Prilagodite gumba za naslednji in prejšnji z uporabo rekvizitov previousLabel in nextLabel. Uporabite lahko na primer nalepke s šivroni, kot je prikazano spodaj.

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

• Prilagodite oznako preloma z uporabo predloge breakLabel. Oznaka preloma je oznaka, ki se prikaže, ko je število strani veliko in komponenta za označevanje strani ne more prikazati vseh povezav strani. Namesto tega prikaže prelom, ki ga predstavlja oznaka preloma, med povezavami. Tukaj je primer, ki uporablja elipso.

   breakLabel={"..."}
  />
  

• Prilagodite število strani za prikaz. Če ne želite prikazati vseh strani, lahko določite število strani s podlago pageCount. Spodnja koda določa število strani kot 5.

   pageCount={5}
  />
  

• Prilagajanje vsebnika in aktivnih razredov. Imena razredov za vsebnik za označevanje strani in povezavo aktivne strani lahko prilagodite z uporabo rekvizitov containerClassName oziroma activeClassName. Nato lahko s temi razredi oblikujete komponento označevanja strani, dokler ne ustreza videzu vaše aplikacije.

   containerClassName={"pagination-container"}
   activeClassName={"aktivna stran"}
  />
  

To ni izčrpen seznam razpoložljivih možnosti prilagajanja. Ostalo najdete v dokumenti knjižnice react-paginate.

Izboljšajte uporabniško izkušnjo z uporabo paginacije

Paginacija je pomembna funkcija v vsaki aplikaciji, ki prikazuje velike količine podatkov. Brez paginacije se morajo uporabniki pomikati po dolgih seznamih, da bi našli informacije, ki jih potrebujejo, kar je zamudno.

Paginacija uporabnikom omogoča preprosto navigacijo do določenih podatkov, ki jih iščejo, tako da jih razdelijo na manjše, bolj obvladljive dele. To ne le prihrani čas, ampak uporabnikom tudi olajša obdelavo informacij.