Η σελιδοποίηση είναι μια χρήσιμη τεχνική από την οποία μπορούν να επωφεληθούν οι περισσότερες εφαρμογές με μεγάλο όγκο δεδομένων. Η βιβλιοθήκη react-σελιδοποίησης σάς βοηθά να απλοποιήσετε αυτή τη διαδικασία.

Η οργάνωση και η εμφάνιση μεγάλων ποσοτήτων δεδομένων με φιλικό προς τον χρήστη τρόπο βελτιώνει την εμπειρία του χρήστη. Μια τεχνική που χρησιμοποιείται για να επιτευχθεί αυτό είναι η σελιδοποίηση.

Στο React, η βιβλιοθήκη react-σελιδοποίησης μπορεί να σας βοηθήσει να απλοποιήσετε την υλοποίηση.

Εισαγωγή στη βιβλιοθήκη react-pageinate

Η βιβλιοθήκη react-σελιδοποίησης διευκολύνει την απόδοση σελιδοποίησης στο React. Σας επιτρέπει να καταχωρείτε στοιχεία σε σελίδες και παρέχει προσαρμόσιμες επιλογές για πράγματα όπως το μέγεθος σελίδας, το εύρος σελίδων και τον αριθμό των σελίδων. Διαθέτει επίσης ενσωματωμένο πρόγραμμα χειρισμού συμβάντων, ώστε να μπορείτε να γράφετε κώδικα για να ανταποκρίνεστε στις αλλαγές της σελίδας.

Παρακάτω, θα δείτε πώς μπορείτε να χρησιμοποιήσετε το react-paginate για να σελιδοποιήσετε δεδομένα που ανακτήθηκαν από ένα API.

instagram viewer

Ρύθμιση του Έργου

Για να ξεκινήσετε, δημιουργήστε ένα έργο React χρησιμοποιώντας την εντολή create-react-app ή Vite. Αυτό το σεμινάριο χρησιμοποιεί το Vite. Μπορείτε να βρείτε τις οδηγίες σε αυτήν την ανάρτηση σχετικά με πώς να ρυθμίσετε έργα React με το Vite.

Μόλις δημιουργήσετε το έργο, διαγράψτε μέρος του περιεχομένου στο App.jsx, ώστε να ταιριάζει με αυτόν τον κωδικό:

λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτό σας δίνει ένα καθαρό αρχείο για να ξεκινήσετε να εργάζεστε με το react-paginate.

Ρύθμιση των δεδομένων

Θα λάβετε δεδομένα από το API κράτησης θέσης JSON. Αυτό το API παρέχει τελικά σημεία για αναρτήσεις, σχόλια, άλμπουμ, φωτογραφίες, εργασίες και χρήστες. Μέσω του τελικού σημείου των αναρτήσεων, θα ανάκτηση δεδομένων από το API χρησιμοποιώντας το Axios, μια βιβλιοθήκη πελάτη HTTP.

Για να ξεκινήσετε, εγκαταστήστε το Axios χρησιμοποιώντας αυτήν την εντολή τερματικού:

npm εγκατάσταση axios

Στη συνέχεια, εισαγάγετε το useEffect hook και τη βιβλιοθήκη axios στο επάνω μέρος του App.jsx, στη συνέχεια λάβετε τις αναρτήσεις από το API όπως φαίνεται παρακάτω.

εισαγωγή αξιος από"αξιος";
εισαγωγή { useEffect, useState } από"αντιδρώ";
λειτουργίαApp() {
συνθ [data, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').έπειτα((απάντηση) => {
 setData (response.data);
 });
 }, []);


ΕΠΙΣΤΡΟΦΗ (


 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Το άγκιστρο useState προετοιμάζει μια μεταβλητή κατάστασης που ονομάζεται δεδομένα με έναν κενό πίνακα. Θα χρησιμοποιήσετε τη συνάρτηση setData για να ενημερώσετε την κατάσταση όταν το API επιστρέφει τις δημοσιεύσεις.

Εφαρμογή σελιδοποίησης με το react-paginate

Τώρα που ρυθμίσατε το έργο και λάβατε τα δεδομένα, ήρθε η ώρα να προσθέσετε σελιδοποίηση χρησιμοποιώντας το react-paginate. Παρακάτω είναι τα βήματα που πρέπει να ακολουθήσετε:

1. Εγκαταστήστε το react-paginate

Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το react-paginate χρησιμοποιώντας npm.

npm εγκατάσταση react-σελιδοποίησης

2. Ορίστε την αρχική κατάσταση των σελίδων

Χρησιμοποιήστε το άγκιστρο useState για να παρακολουθείτε την τρέχουσα σελίδα και τον συνολικό αριθμό σελίδων.

συνθ [currentPage, setCurrentPage] = useState(0);
συνθ [totalPages, setTotalPages] = useState(0);

Θα πρέπει επίσης να καθορίσετε τον συνολικό αριθμό των στοιχείων που μπορεί να έχει μια σελίδα.

συνθ αντικείμεναΠερΣελίδα = 10

Στο άγκιστρο useEffect, προσθέστε την ακόλουθη γραμμή για να υπολογίσετε τον συνολικό αριθμό σελίδων με βάση το μήκος δεδομένων και τον αριθμό των στοιχείων ανά σελίδα. Στη συνέχεια, αποθηκεύστε το στη μεταβλητή κατάστασης totalPages.

setTotalPages(Μαθηματικά.ceil (response.data.length / itemsPerPage));

Το άγκιστρο useEffect θα πρέπει τώρα να μοιάζει με αυτό:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').έπειτα((απάντηση) => {
 setData (response.data);
 setTotalPages(Μαθηματικά.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Καθορίστε μια συνάρτηση για τη διαχείριση των αλλαγών της σελίδας

Πρώτα ορίστε τις μεταβλητές startIndex, endIndex και subset για να αποδώσετε το υποσύνολο δεδομένων με βάση τον τρέχοντα αριθμό σελίδας.

συνθ startIndex = τρέχουσαΣελίδα * itemsPerPage;
συνθ endIndex = startIndex + itemsPerPage;
συνθ υποσύνολο = data.slice (startIndex, endIndex);

Αυτός ο κώδικας υπολογίζει τις τιμές startIndex και endIndex με βάση την τιμή κατάστασης τρέχουσας σελίδας και την τιμή itemsPerPage. Στη συνέχεια χρησιμοποιεί αυτές τις μεταβλητές για να τεμαχίσει τον πίνακα δεδομένων σε ένα υποσύνολο στοιχείων.

Στη συνέχεια, προσθέστε τη συνάρτηση handlePageChange. Αυτό είναι ένα πρόγραμμα χειρισμού συμβάντων που θα εκτελείται όταν ένας χρήστης κάνει κλικ στο κουμπί Επόμενο.

συνθ handlePageChange = (επιλεγμένη σελίδα) => {
 setCurrentPage (selectedPage.selected);
};

Συνολικά, η αίτησή σας θα πρέπει να μοιάζει με αυτό:

εισαγωγή αξιος από"αξιος";
εισαγωγή { useEffect, useState } από"αντιδρώ";
λειτουργίαApp() {
συνθ [data, setData] = useState([]);
συνθ [currentPage, setCurrentPage] = useState(0);
συνθ [totalPages, setTotalPages] = useState(0);
συνθ αντικείμεναΠερΣελίδα = 10;


 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').έπειτα((απάντηση) => {
 setData (response.data);
 });


 setTotalPages(Μαθηματικά.ceil (response.data.length / itemsPerPage));
 }, []);


συνθ startIndex = τρέχουσαΣελίδα * itemsPerPage;
συνθ endIndex = startIndex + itemsPerPage;
συνθ υποσύνολο = data.slice (startIndex, endIndex);


συνθ handlePageChange = (επιλεγμένη σελίδα) => {
 setCurrentPage (selectedPage.selected);
 };


ΕΠΙΣΤΡΟΦΗ (


 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

4. Προσθήκη σελιδοποίησης

Το τελευταίο βήμα είναι η απόδοση των σελίδων χρησιμοποιώντας το στοιχείο ReactPaginate. Προσθέστε τα ακόλουθα στην πρόταση επιστροφής, αντικαθιστώντας την κενή div.



 {subset.map((είδος) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={currentPage}
 />
</div>

Αυτό επαναλαμβάνεται πάνω από τα στοιχεία στο τρέχον υποσύνολο και τα αποδίδει και μεταβιβάζει τα στηρίγματα pageCount, onPageChange και forceChange στο ReactPaginate.

Προσαρμογή του react-σελιδοποίησης

Το react-paginate παρέχει πολλά στηρίγματα που σας επιτρέπουν να προσαρμόσετε την εμφάνιση και την αίσθηση του στοιχείου σελιδοποίησης ώστε να ταιριάζει στις ανάγκες της εφαρμογής σας.

Να μερικά παραδείγματα.

  • Προσαρμόστε το επόμενο και το προηγούμενο κουμπί χρησιμοποιώντας τα στηρίγματα previousLabel και nextLabel. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε ετικέτες chevron όπως φαίνεται παρακάτω.
     previousLabel={"<}
     nextLabel={">>"}
    />
  • Προσαρμόστε την ετικέτα break χρησιμοποιώντας το στηρίγμα breakLabel. Η ετικέτα διακοπής είναι η ετικέτα που εμφανίζεται όταν ο αριθμός των σελίδων είναι υψηλός και το στοιχείο σελιδοποίησης δεν μπορεί να εμφανίσει όλους τους συνδέσμους σελίδας. Αντίθετα, εμφανίζει ένα διάλειμμα, που αντιπροσωπεύεται από την ετικέτα διακοπής, μεταξύ των συνδέσμων. Ακολουθεί ένα παράδειγμα που χρησιμοποιεί έλλειψη.
     breakLabel={"..."}
    />
  • Προσαρμόστε τον αριθμό των σελίδων που θα εμφανίζονται. Εάν δεν θέλετε να εμφανίζονται όλες οι σελίδες, μπορείτε να καθορίσετε τον αριθμό των σελίδων χρησιμοποιώντας το στηρίγμα pageCount. Ο παρακάτω κώδικας καθορίζει τον αριθμό των σελίδων ως 5.
     pageCount={5}
    />
  • Προσαρμογή του Container και των Active Classes. Μπορείτε να προσαρμόσετε τα ονόματα κλάσεων για το κοντέινερ σελιδοποίησης και τον σύνδεσμο ενεργής σελίδας χρησιμοποιώντας τα στηρίγματα containerClassName και activeClassName, αντίστοιχα. Στη συνέχεια, μπορείτε να διαμορφώσετε το στοιχείο σελιδοποίησης χρησιμοποιώντας αυτές τις κλάσεις μέχρι να ταιριάζει στην εμφάνιση της εφαρμογής σας.
     containerClassName={"σελιδοποίηση-κοντέινερ"}
     activeClassName={"ενεργή σελίδα"}
    />

Αυτή δεν είναι μια εξαντλητική λίστα με τις διαθέσιμες επιλογές προσαρμογής. Μπορείτε να βρείτε τα υπόλοιπα στο react-σελιδοποίηση εγγράφων βιβλιοθήκης.

Βελτιώστε την εμπειρία χρήστη χρησιμοποιώντας τη σελιδοποίηση

Η σελιδοποίηση είναι μια σημαντική δυνατότητα σε κάθε εφαρμογή που εμφανίζει μεγάλο όγκο δεδομένων. Χωρίς σελιδοποίηση, οι χρήστες πρέπει να κάνουν κύλιση σε μεγάλες λίστες για να βρουν τις πληροφορίες που χρειάζονται, κάτι που είναι χρονοβόρο.

Η σελιδοποίηση επιτρέπει στους χρήστες να πλοηγούνται εύκολα στα συγκεκριμένα δεδομένα που αναζητούν, χωρίζοντας τα σε μικρότερα, πιο διαχειρίσιμα κομμάτια. Αυτό όχι μόνο εξοικονομεί χρόνο αλλά και διευκολύνει τους χρήστες να επεξεργάζονται τις πληροφορίες.