Sissejuhatus lehekülgede kirjutamisse rakenduses React React-paginate abil

Suurte andmemahtude kasutajasõbralik korraldamine ja kuvamine parandab kasutajakogemust. Üks selle saavutamiseks kasutatav tehnika on lehekülgede kirjutamine.

Reactis võib reacti lehekülgede teek aidata teil juurutamist lihtsustada.

Sissejuhatus react-paginate raamatukogusse

React-paginate teek muudab lehekülgede renderdamise Reactis lihtsaks. See võimaldab teil loetleda lehtedel olevaid üksusi ja pakub kohandatavaid valikuid selliste asjade jaoks nagu lehe suurus, lehevahemik ja lehtede arv. Sellel on ka sisseehitatud sündmuste töötleja, et saaksite lehe muudatustele reageerimiseks koodi kirjutada.

Allpool näete, kuidas saate API-st hangitud andmete lehekülgede muutmiseks kasutada react-paginate.

Projekti seadistamine

Alustuseks looge Reacti projekt, kasutades käsku create-react-app või Vite. See õpetus kasutab Vite'i. Juhised leiate sellest postitusest kuidas Vitega Reacti projekte seadistada.

Kui olete projekti loonud, kustutage osa App.jsx-i sisust, et see vastaks sellele koodile:

funktsiooniRakendus() {
tagasi (
 </div>
 );
}
eksportidavaikimisi Rakendus;

See annab teile puhta faili, mille abil saate react-paginate'iga töötada.

Andmete seadistamine

Toote andmeid JSON-i kohatäite API-st. See API pakub lõpp-punkte postitustele, kommentaaridele, albumitele, fotodele, ülesannetele ja kasutajatele. Postituste lõpp-punkti kaudu saate seda teha hankige Axiose abil andmeid API-st, HTTP-kliendi teek.

Alustamiseks installige Axios, kasutades seda terminali käsku:

npm install axios

Järgmisena importige ülaosas olev useEffecti konks ja axios teek App.jsx, seejärel hankige postitused API-st, nagu allpool näidatud.

importida aksiosid alates"aksios";
importida { useEffect, useState } alates"reageerida";
funktsiooniRakendus() {
konst [andmed, setData] = useState([]);

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

 </div>
 );
}
eksportidavaikimisi Rakendus;

Konks useState lähtestab tühja massiiviga olekumuutuja, mida nimetatakse andmeteks. Kui API postitused tagastab, saate oleku värskendamiseks kasutada funktsiooni setData.

Leheküljenduse rakendamine react-paginate abil

Nüüd, kui olete projekti seadistanud ja andmed toonud, on aeg lisada leheküljed, kasutades react-paginate. Allpool on juhised, mida peaksite järgima.

1. Installige react-paginate

Käivitage react-paginate installimiseks järgmine käsk kasutades npm.

npm install react-paginate

2. Määrake lehtede esialgne olek

Praeguse lehe ja lehtede koguarvu jälgimiseks kasutage konksu useState.

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

Samuti peaksite määrama lehel olevate üksuste koguarvu.

konst itemsPerPage = 10

Lisage konksule useEffect järgmine rida, et arvutada lehtede koguarv andmepikkuse ja üksuste arvu alusel lehel. Seejärel salvestage see olekumuutujas totalPages.

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

Teie useEffecti konks peaks nüüd välja nägema järgmine:

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

3. Määratlege funktsioon lehe muudatuste haldamiseks

Esmalt määratlege muutujad startIndex, endIndex ja alamhulga muutujad, et renderdada andmete alamhulk praeguse lehenumbri alusel.

konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst alamhulk = data.slice (startIndex, endIndex);

See kood arvutab startIndexi ja endIndexi väärtused praeguse lehe oleku väärtuse ja parameetrite itemsPerPage väärtuse põhjal. Seejärel kasutab see neid muutujaid, et jagada andmemassiivi üksuste alamhulgaks.

Seejärel lisage funktsioon handlePageChange. See on sündmuste töötleja, mis käivitub, kui kasutaja klõpsab nuppu Edasi.

konst handPageChange = (valitud leht) => {
 setCurrentPage (selectedPage.selected);
};

Kokkuvõttes peaks teie rakendus välja nägema järgmine:

importida aksiosid alates"aksios";
importida { useEffect, useState } alates"reageerida";
funktsiooniRakendus() {
konst [andmed, setData] = useState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').siis((vastuseks) => {
 setData (response.data);
 });
 setTotalPages(matemaatika.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst alamhulk = data.slice (startIndex, endIndex);
konst handPageChange = (valitud leht) => {
 setCurrentPage (selectedPage.selected);
 };
tagasi (

 </div>
 );
}
eksportidavaikimisi Rakendus;

4. Lehekülje lisamine

Viimane samm on lehtede renderdamine komponendi ReactPaginate abil. Lisage tagastuslausesse järgmine, asendades tühja div.

 {subset.map((üksus) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={praegune leht}
 />
</div>

See kordab praeguse alamhulga üksusi ja renderdab need ning edastab rekvisiidid pageCount, onPageChange ja forceChange programmile ReactPaginate.

React-paginate kohandamine

react-paginate pakub mitmeid rekvisiite, mis võimaldavad teil kohandada lehekülgede komponendi välimust ja tunnet vastavalt teie rakenduse vajadustele.

Siin on mõned näidised.

• Kohandage järgmist ja eelmist nuppu, kasutades rekvisiite previousLabel ja nextLabel. Näiteks võite kasutada chevroni silte, nagu allpool näidatud.

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

• Kohandage katkestuse silti kasutades breakLabeli rekvisiite. Katkestuse silt on silt, mis kuvatakse siis, kui lehtede arv on suur ja lehekülgede muutmise komponent ei suuda kuvada kõiki lehelinke. Selle asemel kuvab see linkide vahel katkestuse, mida tähistab katkestuse silt. Siin on näide, mis kasutab ellipsit.

   breakLabel={"..."}
  />
  

• Kohandage kuvatavate lehtede arvu. Kui te ei soovi kõiki lehti kuvada, saate määrata lehekülgede arvu, kasutades pageCount propi. Allolev kood määrab lehtede arvuks 5.

   pageCount={5}
  />
  

• Konteineri ja aktiivsete klasside kohandamine. Lehekülgede konteineri ja aktiivse lehe lingi klassinimesid saate kohandada, kasutades vastavalt rekvisiite containerClassName ja activeClassName. Seejärel saate neid klasse kasutades lehekülgede komponendi stiili muuta, kuni see sobib teie rakenduse välimusega.

   containerClassName={"lehekülgede mahuti"}
   activeClassName={"aktiivne leht"}
  />
  

See ei ole saadaolevate kohandamisvalikute ammendav loend. Ülejäänud leiate jaotisest react-paginate teegi dokumendid.

Parandage kasutajakogemust lehekülgede jagamise abil

Lehtede lehitsemine on oluline funktsioon igas rakenduses, mis kuvab suuri andmemahtusid. Ilma lehekülgede otsimiseta peavad kasutajad vajaliku teabe leidmiseks sirvima pikki loendeid, mis on aeganõudev.

Lehtede lehitsemine võimaldab kasutajatel hõlpsalt otsida konkreetseid andmeid, jagades need väiksemateks, paremini hallatavateks osadeks. See mitte ainult ei säästa aega, vaid muudab kasutajatele ka teabe töötlemise lihtsamaks.