Sivutus on hyödyllinen tekniikka, josta useimmat paljon dataa käyttävät sovellukset voivat hyötyä. React-paginate -kirjasto auttaa sinua yksinkertaistamaan tätä prosessia.

Suurten tietomäärien järjestäminen ja näyttäminen käyttäjäystävällisellä tavalla parantaa käyttökokemusta. Yksi tämän saavuttamiseen käytetty tekniikka on sivutus.

Reactissa react-sivukirjasto voi auttaa sinua yksinkertaistamaan toteutusta.

React-sivukirjaston esittely

React-sivutuskirjaston avulla on helppo hahmontaa sivutus Reactissa. Sen avulla voit listata kohteita sivuilla ja tarjoaa mukautettavia vaihtoehtoja esimerkiksi sivun koon, sivualueen ja sivujen lukumäärän osalta. Siinä on myös sisäänrakennettu tapahtumakäsittelijä, joten voit kirjoittaa koodia vastataksesi sivun muutoksiin.

Alla näet, kuinka voit sivuuttaa API: lta haetut tiedot react-paginate-toiminnolla.

Projektin perustaminen

Aloita luomalla React-projekti käyttämällä create-react-app-komentoa tai Vitea. Tämä opetusohjelma käyttää Vitea. Löydät ohjeet tästä postauksesta aiheesta kuinka perustaa React-projekteja Viten kanssa.

instagram viewer

Kun olet luonut projektin, poista osa App.jsx-tiedoston sisällöstä, jotta se vastaa tätä koodia:

toimintoSovellus() {
palata (
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä antaa sinulle puhtaan tiedoston, jonka avulla voit aloittaa react-paginaten käytön.

Tietojen asettaminen

Haet tiedot JSON-paikkamerkkisovellusliittymästä. Tämä API tarjoaa päätepisteitä viesteille, kommenteille, albumeille, valokuville, tehtäville ja käyttäjille. Viestien päätepisteen kautta saat noutaa tietoja API: sta Axiosin avulla, HTTP-asiakaskirjasto.

Aloita asentamalla Axios tällä päätekomennolla:

npm asennus axios

Tuo seuraavaksi useEffect-koukku ja axios-kirjasto yläosassa App.jsx, nouta sitten viestit API: sta alla olevan kuvan mukaisesti.

tuonti aksiot alkaen"aksiot";
tuonti { useEffect, useState } alkaen"reagoi";
toimintoSovellus() {
konst [data, setData] = useState([]);

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


palata (


 </div>
 );
}
viedäoletuksena Sovellus;

UseState-koukku alustaa data-nimisen tilamuuttujan tyhjällä taulukolla. Käytät setData-funktiota tilan päivittämiseen, kun API palauttaa viestit.

Sivutuksen toteuttaminen react-paginate-toiminnolla

Nyt kun olet määrittänyt projektin ja noutanut tiedot, on aika lisätä sivutus käyttämällä react-sivutusta. Seuraavat vaiheet sinun tulee noudattaa:

1. Asenna react-paginate

Suorita seuraava komento asentaaksesi react-paginate npm: n avulla.

npm asenna react-paginate

2. Aseta sivujen alkutila

Käytä useState-koukkua seurataksesi nykyistä sivua ja sivujen kokonaismäärää.

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

Sinun tulee myös määrittää sivulla voi olla kohteiden kokonaismäärä.

konst itemsPerPage = 10

Lisää useEffect-koukkuun seuraava rivi laskeaksesi sivujen kokonaismäärän tietojen pituuden ja sivukohtaisten kohteiden lukumäärän perusteella. Tallenna se sitten totalPages-tilamuuttujaan.

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

UseEffect-koukkusi pitäisi nyt näyttää tältä:

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

3. Määritä sivumuutoksia käsittelevä toiminto

Määritä ensin startIndex-, endIndex- ja alijoukkomuuttujat tietojen osajoukon hahmontamiseksi nykyisen sivunumeron perusteella.

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

Tämä koodi laskee startIndex- ja endIndex-arvot currentPage-tilan arvon ja itemsPerPage-arvon perusteella. Sitten se käyttää näitä muuttujia viipaloidakseen tietotaulukon kohteiden osajoukkoon.

Lisää sitten handlePageChange-funktio. Tämä on tapahtumakäsittelijä, joka käynnistyy, kun käyttäjä napsauttaa Seuraava-painiketta.

konst handlePageChange = (valittu sivu) => {
 setCurrentPage (selectedPage.selected);
};

Kaiken kaikkiaan hakemuksesi pitäisi näyttää tältä:

tuonti aksiot alkaen"aksiot";
tuonti { useEffect, useState } alkaen"reagoi";
toimintoSovellus() {
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/').sitten((vastaus) => {
 setData (response.data);
 });


 setTotalPages(Matematiikka.ceil (response.data.length / itemsPerPage));
 }, []);


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


konst handlePageChange = (valittu sivu) => {
 setCurrentPage (selectedPage.selected);
 };


palata (


 </div>
 );
}
viedäoletuksena Sovellus;

4. Lisää sivutus

Viimeinen vaihe on hahmontaa sivut ReactPaginate-komponentilla. Lisää seuraava return-lauseeseen korvaamalla tyhjä div.



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

Tämä toistaa nykyisen osajoukon kohteet ja hahmontaa ne ja välittää pageCount-, onPageChange- ja forceChange-propsot ReactPaginateen.

Reaktiosivujen mukauttaminen

react-paginate tarjoaa useita rekvisiitta, joiden avulla voit mukauttaa sivutuskomponentin ulkoasua ja tuntumaa sovelluksesi tarpeiden mukaan.

Tässä muutamia esimerkkejä.

  • Mukauta seuraava ja edellinen painikkeita käyttämällä previousLabel- ja nextLabel-rekvisiittaa. Voit esimerkiksi käyttää chevron-tarroja alla kuvatulla tavalla.
     previousLabel={"<}
     nextLabel={">>"}
    />
  • Mukauta katkon etiketti breakLabel-pottikkeen avulla. Taukotunniste on tarra, joka näytetään, kun sivuja on paljon, eikä sivutuskomponentti pysty näyttämään kaikkia sivulinkkejä. Sen sijaan se näyttää linkkien välissä tauon, jota edustaa katkon nimi. Tässä on esimerkki, jossa käytetään ellipsiä.
     breakLabel={"..."}
    />
  • Mukauta näytettävien sivujen määrää. Jos et halua näyttää kaikkia sivuja, voit määrittää sivujen lukumäärän pageCount-propanolla. Alla oleva koodi määrittää sivumääräksi 5.
     pageCount={5}
    />
  • Säilön ja aktiivisten luokkien mukauttaminen. Voit mukauttaa sivutussäilön ja aktiivisen sivun linkin luokan nimiä käyttämällä containerClassName- ja ActiveClassName-rekvisiittaa. Voit sitten muokata sivutuskomponenttia näiden luokkien avulla, kunnes se sopii sovelluksesi ulkoasuun.
     containerClassName={"sivutussäilö"}
     activeClassName={"aktiivinen sivu"}
    />

Tämä ei ole tyhjentävä luettelo käytettävissä olevista mukautusvaihtoehdoista. Loput löydät osoitteesta react-paginate kirjaston asiakirjoja.

Paranna käyttökokemusta käyttämällä sivutusta

Sivutus on tärkeä ominaisuus kaikissa suuria tietomääriä näyttävissä sovelluksissa. Ilman sivutusta käyttäjien täytyy selata pitkiä listoja löytääkseen tarvitsemansa tiedot, mikä vie aikaa.

Sivuttamisen avulla käyttäjät voivat helposti navigoida etsimäänsä tietoon jakamalla ne pienempiin, paremmin hallittaviin osiin. Tämä paitsi säästää aikaa, myös helpottaa käyttäjien tietojen käsittelyä.