Bevezetés a lapozásba a React-ban a react-paginate használatával

A nagy mennyiségű adat felhasználóbarát rendszerezése és megjelenítése javítja a felhasználói élményt. Az egyik ilyen módszer az oldalszámozás.

A React alkalmazásban a react lapozási könyvtár segíthet a megvalósítás egyszerűsítésében.

Bevezetés a react-oldalszámú könyvtárba

A react-oldalszámozás könyvtár megkönnyíti a lapozás megjelenítését a Reactban. Lehetővé teszi az elemek listázását az oldalakon, és testreszabható lehetőségeket biztosít olyan dolgokhoz, mint az oldalméret, az oldaltartomány és az oldalak száma. Beépített eseménykezelővel is rendelkezik, így kódot írhat az oldal változásaira.

Az alábbiakban látni fogja, hogyan használhatja a react-paginate funkciót az API-ból lekért adatok lapozására.

A projekt beállítása

Kezdésként hozzon létre egy React projektet a create-react-app paranccsal vagy a Vite segítségével. Ez az oktatóanyag a Vite-t használja. Az utasításokat ebben a bejegyzésben találja

Miután létrehozta a projektet, törölje a tartalom egy részét az App.jsx fájlból, hogy egyezzen ezzel a kóddal:

funkcióApp() {
Visszatérés (
 </div>
 );
}
exportalapértelmezett App;

Ez tiszta fájlt ad a react-paginate használatához.

Az adatok beállítása

Az adatokat a JSON-helyőrző API-ból fogja lekérni. Ez az API végpontokat biztosít a bejegyzésekhez, megjegyzésekhez, albumokhoz, fényképekhez, feladatokhoz és felhasználókhoz. A bejegyzések végpontján keresztül megteheti adatok lekérése az API-ból az Axios segítségével, egy HTTP-ügyfélkönyvtár.

A kezdéshez telepítse az Axiost a következő terminálparancs segítségével:

npm install axios

Ezután importálja a UseEffect hook és axios könyvtárat a tetején App.jsx, majd az alább látható módon töltse le a bejegyzéseket az API-ból.

import axiók tól től"axiók";
import { useEffect, useState } tól től"reagál";
funkcióApp() {
const [data, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').akkor((válasz) => {
 setData (response.data);
 });
 }, []);
Visszatérés (

 </div>
 );
}
exportalapértelmezett App;

A useState hook egy adat nevű állapotváltozót inicializál egy üres tömbbel. A setData függvény segítségével frissítheti az állapotot, amikor az API visszaküldi a bejegyzéseket.

Lapozás megvalósítása react-paginate segítségével

Most, hogy beállította a projektet és lekérte az adatokat, ideje felvenni az oldalszámozást a react-paginate használatával. Az alábbiakban felsoroljuk azokat a lépéseket, amelyeket követnie kell:

1. React-paginate telepítése

Futtassa a következő parancsot a react-paginate telepítéséhez npm használatával.

npm install react-paginate

2. Állítsa be az oldalak kezdeti állapotát

A useState hook segítségével nyomon követheti az aktuális oldalt és az oldalak teljes számát.

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

Azt is meg kell adnia, hogy egy oldal hány elemet tartalmazhat.

const itemsPerPage = 10

A useEffect horogban adja hozzá a következő sort az oldalak teljes számának kiszámításához az adathossz és az oldalankénti elemek száma alapján. Ezután tárolja a totalPages állapotváltozóban.

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

A useEffect hook most így néz ki:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').akkor((válasz) => {
 setData (response.data);
 setTotalPages(Math.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Határozzon meg egy funkciót az oldalmódosítások kezelésére

Először határozza meg a startIndex, endIndex és részhalmaz változókat, hogy az adatok részhalmazát az aktuális oldalszám alapján jelenítse meg.

const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const alhalmaz = data.slice (startIndex, endIndex);

Ez a kód kiszámítja a startIndex és endIndex értékeket a currentPage állapotérték és az itemsPerPage érték alapján. Ezután ezeket a változókat használja fel az adattömb elemeinek részhalmazára szeletelésére.

Ezután adja hozzá a handlePageChange függvényt. Ez egy eseménykezelő, amely akkor fut le, amikor a felhasználó a Tovább gombra kattint.

const handlePageChange = (kiválasztott Oldal) => {
 setCurrentPage (selectedPage.selected);
};

Összességében az alkalmazásnak így kell kinéznie:

import axiók tól től"axiók";
import { useEffect, useState } tól től"reagál";
funkcióApp() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').akkor((válasz) => {
 setData (response.data);
 });
 setTotalPages(Math.ceil (response.data.length / itemsPerPage));
 }, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const alhalmaz = data.slice (startIndex, endIndex);
const handlePageChange = (kiválasztott Oldal) => {
 setCurrentPage (selectedPage.selected);
 };
Visszatérés (

 </div>
 );
}
exportalapértelmezett App;

4. Lapozás hozzáadása

Az utolsó lépés az oldalak megjelenítése a ReactPaginate komponens használatával. Adja hozzá a következőt a return utasításhoz, az üres helyére div.

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

Ez ismétlődik az aktuális részhalmaz elemein, és rendereli őket, és átadja a pageCount, onPageChange és forceChange kellékeket a ReactPaginate-nek.

React-oldalozás testreszabása

A react-paginate számos kelléket biztosít, amelyek lehetővé teszik az oldalszámozási összetevő megjelenésének és hangulatának testreszabását az alkalmazás igényeinek megfelelően.

Íme néhány példa.

• Testreszabhatja a következő és az előző gombokat a previousLabel és nextLabel kellékekkel. Például használhat chevron címkéket az alábbiak szerint.

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

• Testreszabhatja a szünetcímkét a breakLabel kellékkel. A töréscímke az a címke, amely akkor jelenik meg, ha az oldalak száma magas, és az oldalszámozási összetevő nem tudja megjeleníteni az összes oldalhivatkozást. Ehelyett egy törést jelenít meg a hivatkozások között, amelyet a break címke képvisel. Íme egy példa, amely az ellipszist használja.

   breakLabel={"..."}
  />
  

• Testreszabhatja a megjelenítendő oldalak számát. Ha nem szeretné az összes oldalt megjeleníteni, az oldalszámot a pageCount prop segítségével adhatja meg. Az alábbi kód 5-re határozza meg az oldalak számát.

   pageCount={5}
  />
  

• A tároló és az aktív osztályok testreszabása. Testreszabhatja az oldalszámozási tároló és az aktív oldalhivatkozás osztálynevét a containerClassName és az activeClassName kellékekkel. Ezután ezekkel az osztályokkal stílusozhatja az oldalszámozási összetevőt, amíg az illeszkedik az alkalmazás megjelenéséhez.

   containerClassName={"oldalszámozó tároló"}
   activeClassName={"aktív oldal"}
  />
  

Ez nem teljes lista az elérhető testreszabási lehetőségekről. A többit megtalálod a react-paginate könyvtári dokumentumok.

Javítsa a felhasználói élményt az oldalszámozással

A lapozás minden olyan alkalmazásban fontos funkció, amely nagy mennyiségű adatot jelenít meg. Lapozás nélkül a felhasználóknak hosszú listákat kell görgetniük, hogy megtalálják a szükséges információkat, ami időigényes.

Az oldalszámozás lehetővé teszi a felhasználók számára, hogy könnyedén navigálhassanak a keresett konkrét adatokhoz, ha azokat kisebb, jobban kezelhető részekre bontják. Ez nemcsak időt takarít meg, hanem megkönnyíti a felhasználók számára az információk feldolgozását.