Úvod do stránkování v React pomocí Reagovat-Paginate

Uspořádání a zobrazení velkého množství dat uživatelsky přívětivým způsobem zlepšuje uživatelskou zkušenost. Jednou z technik používaných k dosažení tohoto cíle je stránkování.

Knihovna React-paginate vám může pomoci zjednodušit implementaci.

Úvod do reakt-stránkové knihovny

Knihovna React-Paginate usnadňuje vykreslování stránkování v Reactu. Umožňuje vám seznam položek na stránkách a poskytuje přizpůsobitelné možnosti pro věci, jako je velikost stránky, rozsah stránek a počet stránek. Má také vestavěný obslužný program událostí, takže můžete psát kód, který bude reagovat na změny stránky.

Níže uvidíte, jak můžete použít response-paginate k stránkování dat získaných z API.

Nastavení projektu

Chcete-li začít, vytvořte projekt React pomocí příkazu create-react-app nebo Vite. Tento tutoriál používá Vite. Návod najdete v tomto příspěvku o jak nastavit projekty React s Vite.

Po vytvoření projektu odstraňte část obsahu v App.jsx, aby to odpovídalo tomuto kódu:

funkceAplikace() {
vrátit se (
 </div>
 );
}
vývoznívýchozí Aplikace;

Získáte tak čistý soubor, abyste mohli začít pracovat s Reagovat-stránkováním.

Nastavení dat

Data budete načítat ze zástupného rozhraní API JSON. Toto rozhraní API poskytuje koncové body pro příspěvky, komentáře, alba, fotografie, úkoly a uživatele. Prostřednictvím koncového bodu příspěvků budete načíst data z API pomocí Axios, klientská knihovna HTTP.

Chcete-li začít, nainstalujte Axios pomocí tohoto příkazu terminálu:

npm nainstalovat axios

Dále importujte hák useEffect a knihovnu axios v horní části App.jsxa poté načtěte příspěvky z rozhraní API, jak je znázorněno níže.

import axios z"axios";
import { useEffect, useState } z"reagovat";
funkceAplikace() {
konst [data, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').pak((Odezva) => {
 setData (response.data);
 });
 }, []);
vrátit se (

 </div>
 );
}
vývoznívýchozí Aplikace;

Hák useState inicializuje stavovou proměnnou nazvanou data s prázdným polem. Funkci setData použijete k aktualizaci stavu, když API vrátí příspěvky.

Implementace stránkování pomocí funkce Reagovat

Nyní, když jste projekt nastavili a načetli data, je čas přidat stránkování pomocí Reagovat-stránkování. Níže jsou uvedeny kroky, které byste měli dodržovat:

1. Nainstalujte reakci-stránku

Spuštěním následujícího příkazu nainstalujte response-paginate pomocí npm.

npm install reagovat-paginate

2. Nastavte počáteční stav stránek

Použijte háček useState ke sledování aktuální stránky a celkového počtu stránek.

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

Měli byste také určit celkový počet položek, které může stránka obsahovat.

konst itemsPerPage = 10

V háčku useEffect přidejte následující řádek pro výpočet celkového počtu stránek na základě délky dat a počtu položek na stránku. Poté jej uložte do stavové proměnné totalPages.

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

Váš háček useEffect by nyní měl vypadat takto:

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

3. Definujte funkci pro zpracování změn stránky

Nejprve definujte proměnné startIndex, endIndex a subset pro vykreslení podmnožiny dat na základě aktuálního čísla stránky.

konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst podmnožina = data.slice (startIndex, endIndex);

Tento kód vypočítá hodnoty startIndex a endIndex na základě hodnoty stavu currentPage a hodnoty itemsPerPage. Tyto proměnné pak použije k rozdělení datového pole na podmnožinu položek.

Poté přidejte funkci handlePageChange. Toto je obslužná rutina události, která se spustí, když uživatel klikne na tlačítko Další.

konst handlePageChange = (vybranáStránka) => {
 setCurrentPage (selectedPage.selected);
};

Celkově by vaše aplikace měla vypadat takto:

import axios z"axios";
import { useEffect, useState } z"reagovat";
funkceAplikace() {
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/').pak((Odezva) => {
 setData (response.data);
 });
 setTotalPages(Matematika.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = currentPage * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst podmnožina = data.slice (startIndex, endIndex);
konst handlePageChange = (vybranáStránka) => {
 setCurrentPage (selectedPage.selected);
 };
vrátit se (

 </div>
 );
}
vývoznívýchozí Aplikace;

4. Přidat stránkování

Posledním krokem je vykreslení stránek pomocí komponenty ReactPaginate. Přidejte následující do příkazu return a nahraďte prázdný div.

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

Toto iteruje položky v aktuální podmnožině a vykreslí je a předá rekvizity pageCount, onPageChange a forceChange ReactPaginate.

Přizpůsobení reagovat-stránkování

Reag-paginate poskytuje několik rekvizit, které vám umožňují přizpůsobit vzhled a chování komponenty stránkování tak, aby vyhovovala potřebám vaší aplikace.

Zde jsou nějaké příklady.

• Přizpůsobte si další a předchozí tlačítka pomocí rekvizit previousLabel a nextLabel. Můžete například použít štítky ve tvaru šipky, jak je znázorněno níže.

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

• Upravte štítek přerušení pomocí prop. Štítek přerušení je štítek zobrazený, když je počet stránek vysoký a komponenta stránkování není schopna zobrazit všechny odkazy na stránky. Místo toho zobrazí mezi odkazy přerušení, které představuje štítek přerušení. Zde je příklad, který používá elipsu.

   breakLabel={"..."}
  />
  

• Přizpůsobte počet stránek, které se mají zobrazit. Pokud nechcete zobrazit všechny stránky, můžete určit počet stránek pomocí nabídky pageCount. Níže uvedený kód určuje počet stránek jako 5.

   pageCount={5}
  />
  

• Přizpůsobení kontejneru a aktivních tříd. Názvy tříd pro kontejner stránkování a odkaz na aktivní stránku můžete přizpůsobit pomocí rekvizit containerClassName a activeClassName. Pomocí těchto tříd pak můžete stylizovat komponentu stránkování, dokud nebude odpovídat vzhledu vaší aplikace.

   containerClassName={"stránkovací kontejner"}
   activeClassName={"aktivní stránka"}
  />
  

Toto není vyčerpávající seznam dostupných možností přizpůsobení. Zbytek najdete v reagovat-stránkování dokumentů knihovny.

Zlepšete uživatelský dojem pomocí stránkování

Stránkování je důležitou funkcí v každé aplikaci, která zobrazuje velké množství dat. Bez stránkování musí uživatelé procházet dlouhými seznamy, aby našli informace, které potřebují, což je časově náročné.

Stránkování umožňuje uživatelům snadno přejít ke konkrétním datům, která hledají, jejich rozdělením na menší, lépe ovladatelné části. To nejen šetří čas, ale také usnadňuje uživatelům zpracování informací.