Eine Einführung in die Paginierung in React Verwenden von „react-paginate“.

Die benutzerfreundliche Organisation und Anzeige großer Datenmengen verbessert die Benutzererfahrung. Eine Technik, die verwendet wird, um dies zu erreichen, ist die Paginierung.

In React kann Ihnen die React-Paginate-Bibliothek dabei helfen, die Implementierung zu vereinfachen.

Einführung in die React-Paginate-Bibliothek

Die React-Paginate-Bibliothek erleichtert das Rendern von Paginierungen in React. Es ermöglicht Ihnen, Elemente auf Seiten aufzulisten und bietet anpassbare Optionen für Dinge wie Seitengröße, Seitenbereich und die Anzahl der Seiten. Es hat auch einen integrierten Ereignishandler, sodass Sie Code schreiben können, um auf Seitenänderungen zu reagieren.

Unten sehen Sie, wie Sie mit „react-paginate“ von einer API abgerufene Daten paginieren können.

Einrichten des Projekts

Erstellen Sie zunächst ein React-Projekt mit dem Befehl create-react-app oder Vite. Dieses Tutorial verwendet Vite. Die Anleitung dazu finden Sie in diesem Beitrag

Nachdem Sie das Projekt erstellt haben, löschen Sie einige Inhalte in App.jsx, damit es zu diesem Code passt:

FunktionApp() {
zurückkehren (
 </div>
 );
}
ExportStandard Anwendung;

Dadurch erhalten Sie eine saubere Datei, mit der Sie mit React-Paginate arbeiten können.

Einrichten der Daten

Sie werden Daten von der JSON-Platzhalter-API abrufen. Diese API stellt Endpunkte für Posts, Kommentare, Alben, Fotos, Aufgaben und Benutzer bereit. Über den Posts-Endpunkt werden Sie Daten von der API mit Axios abrufen, eine HTTP-Client-Bibliothek.

Installieren Sie zunächst Axios mit diesem Terminalbefehl:

npm installiert Axios

Importieren Sie als Nächstes den useEffect-Hook und die Axios-Bibliothek oben in App.jsx, und rufen Sie dann die Posts von der API ab, wie unten gezeigt.

importieren Axios aus"axios";
importieren { useEffect, useState } aus"reagieren";
FunktionApp() {
konst [Daten, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Dann((Antwort) => {
 setData (Antwort.Daten);
 });
 }, []);
zurückkehren (

 </div>
 );
}
ExportStandard Anwendung;

Der Hook useState initialisiert eine Zustandsvariable namens data mit einem leeren Array. Sie verwenden die setData-Funktion, um den Status zu aktualisieren, wenn die API die Posts zurückgibt.

Paginierung mit React-Paginate implementieren

Nachdem Sie das Projekt eingerichtet und die Daten abgerufen haben, ist es an der Zeit, die Paginierung mit „react-paginate“ hinzuzufügen. Nachfolgend sind die Schritte aufgeführt, die Sie befolgen sollten:

1. React-paginate installieren

Führen Sie den folgenden Befehl aus, um „react-paginate“ zu installieren mit npm.

npm installiere reagieren-paginieren

2. Legen Sie den Anfangszustand der Seiten fest

Verwenden Sie den useState-Hook, um die aktuelle Seite und die Gesamtzahl der Seiten zu verfolgen.

konst [aktuelleSeite, setAktuelleSeite] = useState(0);
konst [totalPages, setTotalPages] = useState(0);

Sie sollten auch die Gesamtzahl der Elemente angeben, die eine Seite haben kann.

konst Artikel pro Seite = 10

Fügen Sie im Hook useEffect die folgende Zeile hinzu, um die Gesamtzahl der Seiten basierend auf der Datenlänge und der Anzahl der Elemente pro Seite zu berechnen. Speichern Sie es dann in der Zustandsvariable totalPages.

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

Ihr useEffect-Hook sollte nun so aussehen:

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

3. Definieren Sie eine Funktion zum Behandeln der Seitenänderungen

Definieren Sie zunächst die Variablen startIndex, endIndex und subset, um die Teilmenge der Daten basierend auf der aktuellen Seitenzahl wiederzugeben.

konst startIndex = aktuelleSeite * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst Teilmenge = data.slice (startIndex, endIndex);

Dieser Code berechnet die startIndex- und endIndex-Werte basierend auf dem aktuellen Seitenstatuswert und dem itemsPerPage-Wert. Anschließend verwendet es diese Variablen, um das Datenarray in eine Teilmenge von Elementen aufzuteilen.

Fügen Sie dann die Funktion handlePageChange hinzu. Dies ist ein Ereignishandler, der ausgeführt wird, wenn ein Benutzer auf die Schaltfläche „Weiter“ klickt.

konst handlePageChange = (ausgewählteSeite) => {
 setCurrentPage (ausgewählteSeite.ausgewählt);
};

Insgesamt sollte Ihre Bewerbung so aussehen:

importieren Axios aus"axios";
importieren { useEffect, useState } aus"reagieren";
FunktionApp() {
konst [Daten, setData] = useState([]);
konst [aktuelleSeite, setAktuelleSeite] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst Artikel pro Seite = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').Dann((Antwort) => {
 setData (Antwort.Daten);
 });
 setTotalPages(Mathematik.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = aktuelleSeite * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst Teilmenge = data.slice (startIndex, endIndex);
konst handlePageChange = (ausgewählteSeite) => {
 setCurrentPage (ausgewählteSeite.ausgewählt);
 };
zurückkehren (

 </div>
 );
}
ExportStandard Anwendung;

4. Paginierung hinzufügen

Der letzte Schritt besteht darin, die Seiten mit der ReactPaginate-Komponente zu rendern. Fügen Sie der return-Anweisung Folgendes hinzu und ersetzen Sie das Leerzeichen div.

 {subset.map((Artikel) => (
{Artikel.Titel}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={aktuelleSeite}
 />
</div>

Dies iteriert über die Elemente in der aktuellen Teilmenge und rendert sie und übergibt die Requisiten pageCount, onPageChange und forceChange an ReactPaginate.

React-Paginate anpassen

„react-paginate“ bietet mehrere Requisiten, mit denen Sie das Erscheinungsbild der Paginierungskomponente an die Anforderungen Ihrer Anwendung anpassen können.

Hier sind einige Beispiele.

• Passen Sie die Schaltflächen „Weiter“ und „Zurück“ mithilfe der Props previousLabel und nextLabel an. Sie können beispielsweise Chevron-Etiketten wie unten gezeigt verwenden.

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

• Passen Sie die Unterbrechungsbezeichnung mit der Eigenschaft breakLabel an. Das Break-Label ist das Label, das angezeigt wird, wenn die Anzahl der Seiten hoch ist und die Paginierungskomponente nicht alle Seitenlinks anzeigen kann. Stattdessen wird zwischen den Verknüpfungen eine Unterbrechung angezeigt, die durch die Unterbrechungsbezeichnung dargestellt wird. Hier ist ein Beispiel, das Ellipsen verwendet.

   breakLabel={"..."}
  />
  

• Passen Sie die Anzahl der anzuzeigenden Seiten an. Wenn Sie nicht alle Seiten anzeigen möchten, können Sie die Anzahl der Seiten mit dem Prop pageCount angeben. Der folgende Code gibt die Seitenanzahl als 5 an.

   pageCount={5}
  />
  

• Anpassen des Containers und der aktiven Klassen. Sie können die Klassennamen für den Paginierungscontainer und den aktiven Seitenlink mit den Props containerClassName bzw. activeClassName anpassen. Anschließend können Sie die Paginierungskomponente mithilfe dieser Klassen gestalten, bis sie zum Aussehen Ihrer App passt.

   containerClassName={"Paginierungscontainer"}
   activeClassName={"aktive Seite"}
  />
  

Dies ist keine vollständige Liste der verfügbaren Anpassungsoptionen. Den Rest findest du in der Bibliotheksdokumente reagieren-paginieren.

Verbessern Sie die Benutzererfahrung durch die Verwendung von Paginierung

Paginierung ist eine wichtige Funktion in jeder Anwendung, die große Datenmengen anzeigt. Ohne Paginierung müssen Benutzer durch lange Listen scrollen, um die gewünschten Informationen zu finden, was zeitaufwändig ist.

Die Paginierung ermöglicht es Benutzern, einfach zu den spezifischen Daten zu navigieren, nach denen sie suchen, indem sie sie in kleinere, besser zu verwaltende Teile aufteilen. Das spart nicht nur Zeit, sondern erleichtert den Benutzern auch die Verarbeitung der Informationen.