Paginering is een handige techniek waarvan de meeste data-intensieve apps kunnen profiteren. De bibliotheek reageren-pageren helpt u dit proces te vereenvoudigen.

Het op een gebruiksvriendelijke manier ordenen en weergeven van grote hoeveelheden data verbetert de gebruikerservaring. Een techniek die wordt gebruikt om dit te bereiken, is paginering.

In React kan de bibliotheek reageren-pageren u helpen de implementatie te vereenvoudigen.

Inleiding tot de bibliotheek reageren-pageren

De bibliotheek reageren-paginateren maakt het gemakkelijk om paginering in React weer te geven. Hiermee kunt u items op pagina's weergeven en biedt het aanpasbare opties voor zaken als paginagrootte, paginabereik en het aantal pagina's. Het heeft ook een ingebouwde gebeurtenishandler, zodat u code kunt schrijven om te reageren op paginawijzigingen.

Hieronder ziet u hoe u react-paginate kunt gebruiken om gegevens die zijn opgehaald uit een API te pagineren.

Het opzetten van het project

Maak om te beginnen een React-project met behulp van de opdracht create-react-app of Vite. Deze tutorial maakt gebruik van Vite. Je vindt de instructies in dit bericht over

instagram viewer
hoe je React-projecten opzet met Vite.

Nadat u het project hebt gemaakt, verwijdert u een deel van de inhoud in App.jsx, zodat het overeenkomt met deze code:

functieapp() {
opbrengst (
 </div>
 );
}
exporterenstandaard App;

Dit geeft je een schoon bestand om aan de slag te gaan met react-paginate.

De gegevens instellen

U haalt gegevens op uit de JSON-placeholder-API. Deze API biedt eindpunten voor berichten, opmerkingen, albums, foto's, taken en gebruikers. Via het posts-eindpunt, jij zult gegevens ophalen van de API met behulp van Axios, een HTTP-clientbibliotheek.

Installeer om te beginnen Axios met behulp van deze terminalopdracht:

npm axios installeren

Importeer vervolgens de useEffect hook en axios-bibliotheek bovenaan App.jsx, en haal vervolgens de berichten op uit de API zoals hieronder weergegeven.

importeren axioma's van"axios";
importeren { useEffect, useState } van"Reageer";
functieapp() {
const [data, setData] = useState([]);

 gebruikEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Dan((antwoord) => {
 setData (antwoord.gegevens);
 });
 }, []);


opbrengst (


 </div>
 );
}
exporterenstandaard App;

De useState hook initialiseert een state variabele genaamd data met een lege array. U gebruikt de functie setData om de status bij te werken wanneer de API de berichten retourneert.

Paginering implementeren Met react-paginate

Nu je het project hebt opgezet en de gegevens hebt opgehaald, is het tijd om paginering toe te voegen met behulp van react-paginate. Hieronder staan ​​de stappen die u moet volgen:

1. Installeer reageren-pageren

Voer de volgende opdracht uit om react-paginate te installeren npm gebruiken.

npm install reageren-pageren

2. Stel de beginstatus van de pagina's in

Gebruik de useState hook om de huidige pagina en het totale aantal pagina's bij te houden.

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

U moet ook het totale aantal items opgeven dat een pagina kan hebben.

const itemsPerPagina = 10

Voeg in de useEffect hook de volgende regel toe om het totale aantal pagina's te berekenen op basis van de gegevenslengte en het aantal items per pagina. Sla het vervolgens op in de totalPages-statusvariabele.

setTotaalPagina's(Wiskunde.ceil (response.data.length / itemsPerPage));

Uw useEffect-haak zou er nu als volgt uit moeten zien:

gebruikEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Dan((antwoord) => {
 setData (antwoord.gegevens);
 setTotaalPagina's(Wiskunde.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Definieer een functie om de paginawijzigingen af ​​te handelen

Definieer eerst de variabelen startIndex, endIndex en subset om de subset van gegevens weer te geven op basis van het huidige paginanummer.

const startIndex = huidigePagina * itemsPerPagina;
const endIndex = startIndex + itemsPerPagina;
const subset = data.slice (startIndex, endIndex);

Deze code berekent de waarden startIndex en endIndex op basis van de waarde currentPage state en de waarde itemsPerPage. Vervolgens gebruikt het deze variabelen om de data-array op te splitsen in een subset van items.

Voeg vervolgens de functie handlePageChange toe. Dit is een gebeurtenishandler die wordt uitgevoerd wanneer een gebruiker op de knop Volgende klikt.

const handlePageChange = (geselecteerdePagina) => {
 setCurrentPage (selectedPage.selected);
};

Al met al zou uw aanvraag er als volgt uit moeten zien:

importeren axioma's van"axios";
importeren { useEffect, useState } van"Reageer";
functieapp() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemsPerPagina = 10;


 gebruikEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').Dan((antwoord) => {
 setData (antwoord.gegevens);
 });


 setTotaalPagina's(Wiskunde.ceil (response.data.length / itemsPerPage));
 }, []);


const startIndex = huidigePagina * itemsPerPagina;
const endIndex = startIndex + itemsPerPagina;
const subset = data.slice (startIndex, endIndex);


const handlePageChange = (geselecteerdePagina) => {
 setCurrentPage (selectedPage.selected);
 };


opbrengst (


 </div>
 );
}
exporterenstandaard App;

4. Paginering toevoegen

De laatste stap is om de pagina's weer te geven met behulp van de ReactPaginate-component. Voeg het volgende toe aan de return-instructie, ter vervanging van de lege div.



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

Dit herhaalt de items in de huidige subset en geeft ze weer en geeft de props pageCount, onPageChange en forceChange door aan ReactPaginate.

Reageren op maat aanpassen

react-paginate biedt verschillende hulpmiddelen waarmee u het uiterlijk van de pagineringscomponent kunt aanpassen aan de behoeften van uw toepassing.

Hier zijn enkele voorbeelden.

  • Pas de volgende en vorige knoppen aan met behulp van de rekwisieten previousLabel en nextLabel. U kunt bijvoorbeeld chevron-labels gebruiken zoals hieronder weergegeven.
     vorigLabel={"<}
     volgendeLabel={">>"}
    />
  • Pas het pauzelabel aan met behulp van de breakLabel-prop. Het eindlabel is het label dat wordt weergegeven wanneer het aantal pagina's hoog is en de pagineringscomponent niet alle paginakoppelingen kan weergeven. In plaats daarvan wordt tussen de koppelingen een pauze weergegeven, weergegeven door het label Break. Hier is een voorbeeld waarin weglatingstekens worden gebruikt.
     breakLabel={"..."}
    />
  • Pas het aantal weer te geven pagina's aan. Als u niet alle pagina's wilt weergeven, kunt u het aantal pagina's specificeren met behulp van de pageCount-prop. De onderstaande code specificeert het aantal pagina's als 5.
     pageCount={5}
    />
  • De container en actieve klassen aanpassen. U kunt de klassenamen voor de pagineringscontainer en de actieve paginalink aanpassen met respectievelijk de containerClassName en activeClassName props. U kunt de pagineringscomponent vervolgens stylen met behulp van deze klassen totdat deze past bij het uiterlijk van uw app.
     containerClassName={"pagination-container"}
     activeClassName={"actieve pagina"}
    />

Dit is geen uitputtende lijst van de beschikbare aanpassingsopties. De rest vind je in de bibliotheekdocumenten reageren-pagineren.

Verbeter de gebruikerservaring door paginering te gebruiken

Paginering is een belangrijke functie in elke toepassing die grote hoeveelheden gegevens weergeeft. Zonder paginering moeten gebruikers door lange lijsten bladeren om de informatie te vinden die ze nodig hebben, wat tijdrovend is.

Met paginering kunnen gebruikers eenvoudig navigeren naar de specifieke gegevens waarnaar ze op zoek zijn door deze op te splitsen in kleinere, beter beheersbare brokken. Dit bespaart niet alleen tijd, maar maakt het ook gemakkelijker voor gebruikers om de informatie te verwerken.