Ievads lapā React, izmantojot react-paginate

Liela datu apjoma organizēšana un attēlošana lietotājam draudzīgā veidā uzlabo lietotāja pieredzi. Viens no paņēmieniem, kas tiek izmantots, lai to panāktu, ir lappušu ievietošana.

Programmā React react lappušu bibliotēka var palīdzēt vienkāršot ieviešanu.

Ievads react-paginate bibliotēkā

React lappušu kārtošanas bibliotēka atvieglo lappušu renderēšanu programmā React. Tas ļauj uzskaitīt vienumus lapās un nodrošina pielāgojamas opcijas tādām lietām kā lapas izmērs, lappušu diapazons un lapu skaits. Tam ir arī iebūvēts notikumu apstrādātājs, lai jūs varētu rakstīt kodu, lai reaģētu uz lapas izmaiņām.

Tālāk ir norādīts, kā varat izmantot react-paginate, lai sakārtotu datus, kas izgūti no API.

Projekta iestatīšana

Lai sāktu, izveidojiet React projektu, izmantojot komandu create-react-app vai Vite. Šajā apmācībā tiek izmantota Vite. Norādījumus varat atrast šajā rakstā par kā izveidot React projektus ar Vite.

Kad esat izveidojis projektu, izdzēsiet daļu no App.jsx satura, lai tas atbilstu šim kodam:

funkcijuApp() {
atgriezties (
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Tas dod jums tīru failu, lai sāktu strādāt ar react-paginate.

Datu iestatīšana

Jūs iegūsit datus no JSON viettura API. Šis API nodrošina galapunktus ziņām, komentāriem, albumiem, fotoattēliem, uzdevumiem un lietotājiem. Izmantojot ziņu galapunktu, jūs to darīsit izgūt datus no API, izmantojot Axios, HTTP klienta bibliotēka.

Lai sāktu, instalējiet Axios, izmantojot šo termināļa komandu:

npm instalēt axios

Pēc tam importējiet useEffect hook un axios bibliotēku, kas atrodas augšpusē App.jsx, pēc tam ienesiet ziņas no API, kā parādīts tālāk.

imports axios no"aksios";
imports { useEffect, useState } no"reaģēt";
funkcijuApp() {
konst [dati, setData] = useState([]);

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

 </div>
 );
}
eksportētnoklusējuma Lietotne;

UseState āķis inicializē stāvokļa mainīgo, ko sauc par datiem, ar tukšu masīvu. Jūs izmantosiet funkciju setData, lai atjauninātu stāvokli, kad API atgriež ziņas.

Paginācijas ieviešana ar react-paginate

Tagad, kad esat iestatījis projektu un ienesis datus, ir pienācis laiks pievienot lappušu kārtošanu, izmantojot react-paginate. Tālāk ir norādītas darbības, kas jums jāveic.

1. Instalējiet reaģēt-paginate

Palaidiet šo komandu, lai instalētu react-paginate izmantojot npm.

npm instalēt reaģēt-paginate

2. Iestatiet lappušu sākotnējo stāvokli

Izmantojiet āķi useState, lai izsekotu pašreizējai lapai un kopējam lappušu skaitam.

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

Jums arī jānorāda kopējais lapu vienumu skaits.

konst itemsPerPage = 10

Āķī useEffect pievienojiet šo rindiņu, lai aprēķinātu kopējo lappušu skaitu, pamatojoties uz datu garumu un vienumu skaitu lapā. Pēc tam saglabājiet to totalPages stāvokļa mainīgajā.

setTotalPages(Matemātika.ceil (response.data.length / itemsPerPage));

Jūsu useEffect āķim tagad vajadzētu izskatīties šādi:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').tad((atbildi) => {
 setData (response.data);
 setTotalPages(Matemātika.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Definējiet funkciju, lai apstrādātu lapas izmaiņas

Vispirms definējiet startIndex, endIndex un apakškopas mainīgos, lai atveidotu datu apakškopu, pamatojoties uz pašreizējo lapas numuru.

konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst apakškopa = data.slice (startIndex, endIndex);

Šis kods aprēķina startIndex un endIndex vērtības, pamatojoties uz currentPage stāvokļa vērtību un itemsPerPage vērtību. Pēc tam tas izmanto šos mainīgos, lai sadalītu datu masīvu vienumu apakškopā.

Pēc tam pievienojiet funkciju handlePageChange. Šis ir notikumu apstrādātājs, kas darbosies, kad lietotājs noklikšķinās uz pogas Tālāk.

konst handPageChange = (atlasītā lapa) => {
 setCurrentPage (selectedPage.selected);
};

Kopumā jūsu pieteikumam vajadzētu izskatīties šādi:

imports axios no"aksios";
imports { useEffect, useState } no"reaģēt";
funkcijuApp() {
konst [dati, setData] = useState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').tad((atbildi) => {
 setData (response.data);
 });
 setTotalPages(Matemātika.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst apakškopa = data.slice (startIndex, endIndex);
konst handPageChange = (atlasītā lapa) => {
 setCurrentPage (selectedPage.selected);
 };
atgriezties (

 </div>
 );
}
eksportētnoklusējuma Lietotne;

4. Pievienot lappusi

Pēdējais solis ir lapu renderēšana, izmantojot komponentu ReactPaginate. Atgriešanas priekšrakstam pievienojiet tālāk norādīto, aizstājot tukšo div.

 {subset.map((lieta) => (
{item.title}</div>
 ))}
 pageCount={kopā lapas}
 onPageChange={handlePageChange}
 forcePage={pašreizējā lapa}
 />
</div>

Tas atkārto vienumus pašreizējā apakškopā un atveido tos un nodod pageCount, onPageChange un forceChange rekvizītus ReactPaginate.

Pielāgošana reaģēt-paginate

react-paginate nodrošina vairākus rekvizītus, kas ļauj pielāgot lappušu veidošanas komponenta izskatu un darbību, lai tas atbilstu jūsu lietojumprogrammas vajadzībām.

Šeit ir daži piemēri.

• Pielāgojiet nākamās un iepriekšējās pogas, izmantojot iepriekšējās etiķetes un nextLabel rekvizītus. Piemēram, varat izmantot ševronu etiķetes, kā parādīts tālāk.

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

• Pielāgojiet pārtraukuma etiķeti, izmantojot breakLabel rekvizītu. Pārtraukuma etiķete ir etiķete, kas tiek rādīta, ja ir liels lapu skaits un lappušu veidošanas komponents nevar parādīt visas lapas saites. Tā vietā starp saitēm tiek parādīts pārtraukums, ko attēlo pārtraukuma etiķete. Šeit ir piemērs, kurā tiek izmantota elipsi.

   breakLabel={"..."}
  />
  

• Pielāgojiet parādāmo lapu skaitu. Ja nevēlaties rādīt visas lapas, varat norādīt lappušu skaitu, izmantojot pageCount prop. Tālāk norādītais kods norāda, ka lapu skaits ir 5.

   pageCount={5}
  />
  

• Konteinera un aktīvo klašu pielāgošana. Varat pielāgot klašu nosaukumus lappušu konteineram un aktīvās lapas saitei, izmantojot attiecīgi konteineraClassName un activeClassName rekvizītus. Pēc tam varat veidot lappušu komponenta stilu, izmantojot šīs klases, līdz tas atbilst jūsu lietotnes izskatam.

   containerClassName={"lappušu lapu konteiners"}
   activeClassName={"aktīvā lapa"}
  />
  

Šis nav pilnīgs pieejamo pielāgošanas iespēju saraksts. Pārējo varat atrast sadaļā reaģēt-paginate bibliotēkas dokumenti.

Uzlabojiet lietotāja pieredzi, izmantojot lappuses

Lapu šķirošana ir svarīga funkcija jebkurā lietojumprogrammā, kas parāda lielu datu apjomu. Bez lappušu pārveidošanas lietotājiem ir jāritina gari saraksti, lai atrastu vajadzīgo informāciju, kas ir laikietilpīga.

Lapu ievietošana ļauj lietotājiem viegli pārvietoties uz konkrētajiem datiem, kurus viņi meklē, sadalot tos mazākos, vieglāk pārvaldāmos gabalos. Tas ne tikai ietaupa laiku, bet arī atvieglo lietotājiem informācijas apstrādi.