En introduktion til sideinddeling i React ved hjælp af react-pagete

Organisering og visning af store mængder data på en brugervenlig måde forbedrer brugeroplevelsen. En teknik, der bruges til at opnå dette, er paginering.

I React kan react-pagineret biblioteket hjælpe dig med at forenkle implementeringen.

Introduktion til React-pagined Library

React-pagineret biblioteket gør det nemt at gengive paginering i React. Det giver dig mulighed for at liste elementer på sider og giver tilpasningsmuligheder for ting som sidestørrelse, sideområde og antallet af sider. Den har også en indbygget hændelseshandler, så du kan skrive kode for at reagere på sideændringer.

Nedenfor vil du se, hvordan du kan bruge react-pagete til at paginere data hentet fra en API.

Opsætning af projektet

For at begynde skal du oprette et React-projekt ved hjælp af create-react-app kommandoen eller Vite. Denne tutorial bruger Vite. Du kan finde instruktionerne i dette indlæg om hvordan man opsætter React-projekter med Vite.

Når du har oprettet projektet, skal du slette noget af indholdet i App.jsx, så det matcher denne kode:

fungereApp() {
Vend tilbage (
 </div>
 );
}
eksportStandard App;

Dette giver dig en ren fil til at begynde at arbejde med react-pagete.

Opsætning af data

Du henter data fra JSON pladsholder API. Denne API giver endepunkter for indlæg, kommentarer, album, fotos, gøremål og brugere. Via postens slutpunkt vil du hente data fra API'et ved hjælp af Axios, et HTTP-klientbibliotek.

For at komme i gang skal du installere Axios ved hjælp af denne terminalkommando:

npm installere aksioer

Importer derefter useEffect hook og axios-biblioteket øverst i App.jsx, og hent derefter indlæggene fra API'et som vist nedenfor.

importere axios fra"aksios";
importere { useEffect, useState } fra"reagere";
fungereApp() {
konst [data, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').derefter((respons) => {
 setData (respons.data);
 });
 }, []);
Vend tilbage (

 </div>
 );
}
eksportStandard App;

useState-krogen initialiserer en tilstandsvariabel kaldet data med et tomt array. Du skal bruge setData-funktionen til at opdatere tilstanden, når API'en returnerer indlæggene.

Implementering af paginering med reaktions-paginering

Nu hvor du har konfigureret projektet og hentet dataene, er det tid til at tilføje paginering ved hjælp af react-pagete. Nedenfor er de trin, du skal følge:

1. Installer reaktionsside

Kør følgende kommando for at installere react-pagete bruger npm.

npm installer react-pagete

2. Indstil sidernes oprindelige tilstand

Brug useState-krogen til at holde styr på den aktuelle side og det samlede antal sider.

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

Du bør også angive det samlede antal elementer, en side kan have.

konst itemsPerPage = 10

Tilføj følgende linje i useEffect-krogen for at beregne det samlede antal sider baseret på datalængden og antallet af elementer pr. side. Gem den derefter i totalPages-tilstandsvariablen.

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

Din useEffect hook skulle nu se sådan ud:

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

3. Definer en funktion til at håndtere sideændringerne

Definer først startIndex, endIndex og delmængdevariablerne for at gengive delmængden af ​​data baseret på det aktuelle sidetal.

konst startIndex = nuværende Side * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst subset = data.slice (startIndex, endIndex);

Denne kode beregner startIndex- og endIndex-værdierne baseret på den aktuellePage-tilstandsværdi og itemsPerPage-værdien. Den bruger derefter disse variabler til at opdele dataarrayet i en undergruppe af elementer.

Tilføj derefter handlePageChange-funktionen. Dette er en hændelseshåndtering, der kører, når en bruger klikker på knappen Næste.

konst handlePageChange = (valgt side) => {
 setCurrentPage (selectedPage.selected);
};

Samlet set skal din ansøgning se sådan ud:

importere axios fra"aksios";
importere { useEffect, useState } fra"reagere";
fungereApp() {
konst [data, setData] = useState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').derefter((respons) => {
 setData (respons.data);
 });
 setTotalPages(Matematik.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = nuværende Side * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst subset = data.slice (startIndex, endIndex);
konst handlePageChange = (valgt side) => {
 setCurrentPage (selectedPage.selected);
 };
Vend tilbage (

 </div>
 );
}
eksportStandard App;

4. Tilføj sideinddeling

Det sidste trin er at gengive siderne ved hjælp af ReactPaginate-komponenten. Tilføj følgende til returneringserklæringen, og erstat den tomme div.

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

Dette itererer over elementerne i det aktuelle undersæt og gengiver dem og sender sideCount, onPageChange og forceChange-rekvisitterne til ReactPaginate.

Tilpasning af reaktions-paginering

react-paginate giver flere rekvisitter, der giver dig mulighed for at tilpasse udseendet og følelsen af ​​pagineringskomponenten, så den passer til din applikations behov.

Her er nogle eksempler.

• Tilpas de næste og forrige knapper ved hjælp af forrigeLabel og nextLabel rekvisitter. For eksempel kan du bruge chevron-etiketter som vist nedenfor.

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

• Tilpas pauseetiketten ved hjælp af breakLabel prop. Pauseetiketten er den etiket, der vises, når antallet af sider er højt, og pagineringskomponenten ikke er i stand til at vise alle sidelinks. I stedet viser den et brud, repræsenteret ved brudetiketten, mellem linkene. Her er et eksempel, der bruger ellipse.

   breakLabel={"..."}
  />
  

• Tilpas antallet af sider, der skal vises. Hvis du ikke vil vise alle siderne, kan du angive antallet af sider ved hjælp af sidetæller-prop. Koden nedenfor angiver sideantallet som 5.

   sideantal={5}
  />
  

• Tilpasning af container- og aktive klasser. Du kan tilpasse klassenavnene for pagineringsbeholderen og det aktive sidelink ved hjælp af henholdsvis containerClassName og activeClassName rekvisitter. Du kan derefter style pagineringskomponenten ved hjælp af disse klasser, indtil den passer til udseendet af din app.

   containerClassName={"pagineringsbeholder"}
   activeClassName={"aktiv side"}
  />
  

Dette er ikke en udtømmende liste over de tilgængelige tilpasningsmuligheder. Du kan finde resten i reager-pagineret biblioteksdokumenter.

Forbedre brugeroplevelsen ved at bruge sideinddeling

Sideinddeling er en vigtig funktion i enhver applikation, der viser store mængder data. Uden paginering skal brugerne scrolle gennem lange lister for at finde den information, de har brug for, hvilket er tidskrævende.

Sideinddeling giver brugerne mulighed for nemt at navigere til de specifikke data, de leder efter, ved at dele dem op i mindre, mere håndterbare bidder. Dette sparer ikke kun tid, men gør det også lettere for brugerne at behandle oplysningerne.