Įvadas į puslapių rašymą programoje „React“ naudojant „react-paginate“.

Didelių duomenų kiekių tvarkymas ir rodymas patogiu būdu pagerina vartotojo patirtį. Viena iš būdų tai pasiekti yra puslapių spausdinimas.

Programoje „React“ react puslapių biblioteka gali padėti supaprastinti diegimą.

Įvadas į react-paginate biblioteką

„React“ puslapių kūrimo biblioteka leidžia lengvai pateikti puslapius „React“. Tai leidžia puslapiuose išvardyti elementus ir pateikia tinkinamas parinktis, pvz., puslapio dydį, puslapių diapazoną ir puslapių skaičių. Jame taip pat yra įmontuota įvykių tvarkytuvė, kad galėtumėte rašyti kodą, kad galėtumėte reaguoti į puslapio pakeitimus.

Žemiau pamatysite, kaip galite naudoti react-paginate, norėdami surūšiuoti duomenis, gautus iš API.

Projekto nustatymas

Norėdami pradėti, sukurkite „React“ projektą naudodami komandą „create-react-app“ arba „Vite“. Šioje pamokoje naudojama Vite. Instrukcijas galite rasti šiame įraše apie kaip nustatyti React projektus su Vite.

Sukūrę projektą ištrinkite dalį App.jsx turinio, kad jis atitiktų šį kodą:

funkcijaProgramėlė() {
grąžinti (
 </div>
 );
}
eksportuotinumatytas Programėlė;

Tai suteikia jums švarų failą, kad galėtumėte pradėti dirbti su react-paginate.

Duomenų nustatymas

Gausite duomenis iš JSON rezervuotos vietos API. Ši API suteikia įrašų, komentarų, albumų, nuotraukų, darbų ir vartotojų galutinius taškus. Per įrašų galutinį tašką tai padarysite gauti duomenis iš API naudojant Axios, HTTP kliento biblioteka.

Norėdami pradėti, įdiekite „Axios“ naudodami šią terminalo komandą:

npm įdiegti axios

Tada importuokite „useEffect Hook“ ir „axios“ biblioteką viršuje App.jsx, tada gaukite įrašus iš API, kaip parodyta toliau.

importuoti aksios iš"aksios";
importuoti { useEffect, useState } iš"reaguoti";
funkcijaProgramėlė() {
konst [duomenys, setData] = useState([]);

 useEffect (() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').tada ((atsakymą) => {
 setData (response.data);
 });
 }, []);
grąžinti (

 </div>
 );
}
eksportuotinumatytas Programėlė;

„useState“ kabliukas inicijuoja būsenos kintamąjį, vadinamą duomenimis, tuščiu masyvu. Būsenai atnaujinti, kai API grąžins įrašus, naudosite funkciją setData.

Puslapių kūrimo įgyvendinimas naudojant react-paginate

Dabar, kai nustatėte projektą ir gavote duomenis, laikas įtraukti puslapių puslapius naudojant react-paginate. Toliau pateikiami veiksmai, kuriuos turėtumėte atlikti:

1. Įdiekite react-paginate

Vykdykite šią komandą, kad įdiegtumėte react-paginate naudojant npm.

npm įdiegti react-paginate

2. Nustatykite pradinę puslapių būseną

Norėdami sekti dabartinį puslapį ir bendrą puslapių skaičių, naudokite kabliuką useState.

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

Taip pat turėtumėte nurodyti bendrą elementų skaičių puslapyje.

konst itemsPerPage = 10

Į „useEffect“ kabliuką pridėkite šią eilutę, kad apskaičiuotumėte bendrą puslapių skaičių pagal duomenų ilgį ir elementų skaičių puslapyje. Tada išsaugokite jį totalPages būsenos kintamajame.

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

Jūsų useEffect kabliukas dabar turėtų atrodyti taip:

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

3. Apibrėžkite puslapio pakeitimų tvarkymo funkciją

Pirmiausia apibrėžkite startIndex, endIndex ir poaibio kintamuosius, kad duomenų poaibis būtų pateiktas pagal dabartinį puslapio numerį.

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

Šis kodas apskaičiuoja startIndex ir endIndex reikšmes, remdamasis dabartinio puslapio būsenos reikšme ir reikšme itemsPerPage. Tada jis naudoja šiuos kintamuosius, kad suskirstytų duomenų masyvą į elementų poaibį.

Tada pridėkite funkciją handlePageChange. Tai įvykių tvarkyklė, kuri veiks, kai vartotojas spustelėja mygtuką Kitas.

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

Iš viso jūsų programa turėtų atrodyti taip:

importuoti aksios iš"aksios";
importuoti { useEffect, useState } iš"reaguoti";
funkcijaProgramėlė() {
konst [duomenys, setData] = useState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;
 useEffect (() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').tada ((atsakymą) => {
 setData (response.data);
 });
 setTotalPages(Matematika.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst poaibis = data.slice (startIndex, endIndex);
konst handPageChange = (pasirinktasPuslapis) => {
 setCurrentPage (selectedPage.selected);
 };
grąžinti (

 </div>
 );
}
eksportuotinumatytas Programėlė;

4. Pridėti puslapius

Paskutinis žingsnis yra pateikti puslapius naudojant „ReactPaginate“ komponentą. Pridėkite šiuos prie grąžinimo teiginio, pakeisdami tuščią div.

 {subset.map((daiktas) => (
{item.title}</div>
 ))}
 pageCount={viso puslapių}
 onPageChange={handlePageChange}
 forcePage={dabartinis puslapis}
 />
</div>

Tai kartoja elementus, esančius dabartiniame poaibyje, ir pateikia juos bei perduoda pageCount, onPageChange ir forceChange rekvizitus į ReactPaginate.

React-paginate tinkinimas

„react-paginate“ pateikia keletą rekvizitų, leidžiančių tinkinti puslapių kūrimo komponento išvaizdą ir pojūtį, kad jis atitiktų jūsų programos poreikius.

Štai keletas pavyzdžių.

• Tinkinkite kitą ir ankstesnį mygtukus naudodami ankstesnės etiketės ir kitos etiketės rekvizitus. Pavyzdžiui, galite naudoti ševronų etiketes, kaip parodyta toliau.

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

• Tinkinkite pertraukos etiketę naudodami „breakLabel“ atramą. Pertraukos etiketė yra etiketė, rodoma, kai puslapių skaičius yra didelis, o puslapių skyrimo komponentas negali rodyti visų puslapių nuorodų. Vietoj to, tarp nuorodų rodoma pertrauka, pažymėta pertraukos etikete. Štai pavyzdys, kuriame naudojama elipsė.

   breakLabel={"..."}
  />
  

• Tinkinkite rodomų puslapių skaičių. Jei nenorite rodyti visų puslapių, galite nurodyti puslapių skaičių naudodami pageCount pasiūlymą. Žemiau pateiktas kodas nurodo puslapių skaičių kaip 5.

   pageCount={5}
  />
  

• Konteinerio ir aktyvių klasių pritaikymas. Galite tinkinti puslapių rūšiavimo sudėtinio rodinio ir aktyvaus puslapio nuorodos klasių pavadinimus naudodami atitinkamai konteinerio klasės pavadinimas ir aktyvios klasės pavadinimas. Tada galite formuoti puslapių skyrimo komponentą naudodami šias klases, kol jis atitiks jūsų programos išvaizdą.

   containerClassName={„puslapių talpinimas“}
   activeClassName={"aktyvus puslapis"}
  />
  

Tai nėra baigtinis galimų tinkinimo parinkčių sąrašas. Likusią dalį galite rasti react-paginate bibliotekos dokumentus.

Pagerinkite naudotojo patirtį naudodami puslapių tvarkymą

Puslapių skyrimas yra svarbi bet kurios programos, kuri rodo didelius duomenų kiekius, funkcija. Nenaudodami puslapių, vartotojai turi slinkti ilgus sąrašus, kad surastų jiems reikalingą informaciją, o tai užima daug laiko.

Puslapių keitimas leidžia vartotojams lengvai naršyti prie konkrečių ieškomų duomenų, suskirstant juos į mažesnius, lengviau valdomus gabalus. Taip ne tik sutaupoma laiko, bet ir vartotojams lengviau apdoroti informaciją.