עימוד היא טכניקה שימושית שרוב האפליקציות עתירות הנתונים יכולות להפיק תועלת ממנה. ספריית ה-React-Papiere עוזרת לך לפשט את התהליך הזה.

ארגון והצגת כמויות גדולות של נתונים באופן ידידותי למשתמש משפר את חווית המשתמש. טכניקה אחת המשמשת כדי להשיג זאת היא עימוד.

ב-React, ספריית ה-react-pagete יכולה לעזור לך לפשט את היישום.

היכרות עם ספריית ה-React-Papiere

ספריית ה-react-pagete מקלה על רינדור העימוד ב-React. זה מאפשר לך לרשום פריטים בדפים ומספק אפשרויות להתאמה אישית עבור דברים כמו גודל עמוד, טווח עמודים ומספר עמודים. יש לו גם מטפל אירועים מובנה כך שתוכל לכתוב קוד כדי להגיב לשינויים בעמוד.

להלן, תראה כיצד אתה יכול להשתמש ב-react-pagete כדי לעמוד בנתונים שאוחזרו מ-API.

הגדרת הפרויקט

כדי להתחיל, צור פרויקט React באמצעות הפקודה create-react-app או Vite. מדריך זה משתמש ב-Vite. אתה יכול למצוא את ההוראות בפוסט זה על כיצד להגדיר פרויקטים של React עם Vite.

לאחר שיצרת את הפרויקט, מחק חלק מהתוכן ב-App.jsx, כך שהוא יתאים לקוד הזה:

פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

זה נותן לך קובץ נקי להתחיל לעבוד עם react-pagete.

instagram viewer

הגדרת הנתונים

אתה תביא נתונים מ-API של JSON placeholder. API זה מספק נקודות קצה לפוסטים, הערות, אלבומים, תמונות, מטלות ומשתמשים. דרך נקודת הקצה של הפוסטים, תעשה זאת להביא נתונים מה-API באמצעות Axios, ספריית לקוח HTTP.

כדי להתחיל, התקן את Axios באמצעות פקודת מסוף זו:

npm להתקין אקסיות

לאחר מכן, ייבא את ספריית ה-useEffect ו-axios בחלק העליון של App.jsx, ולאחר מכן אחזר את הפוסטים מה-API כפי שמוצג להלן.

יְבוּא אקסיוס מ"אקסיות";
יְבוּא { useEffect, useState } מ"לְהָגִיב";
פוּנקצִיָהאפליקציה() {
const [נתונים, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').לאחר מכן((תְגוּבָה) => {
 setData (response.data);
 });
 }, []);


לַחֲזוֹר (


 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

ה-useState hook מאתחל משתנה מצב הנקרא נתונים עם מערך ריק. תשתמש בפונקציה setData כדי לעדכן את המצב כאשר ה-API יחזיר את הפוסטים.

יישום עימוד עם דף תגובה

כעת לאחר שהגדרת את הפרויקט והבאת את הנתונים, הגיע הזמן להוסיף עימוד באמצעות דף תגובה. להלן השלבים שעליך לבצע:

1. התקן את דף הגיבו

הפעל את הפקודה הבאה כדי להתקין react-pagete באמצעות npm.

npm להתקין react-pagete

2. הגדר את המצב ההתחלתי של הדפים

השתמש ב-useState Hook כדי לעקוב אחר העמוד הנוכחי והמספר הכולל של הדפים.

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

עליך לציין גם את המספר הכולל של פריטים שיכולים להיות בדף.

const itemsPage = 10

ב-useEffect hook, הוסף את השורה הבאה כדי לחשב את המספר הכולל של עמודים על סמך אורך הנתונים ומספר הפריטים בעמוד. לאחר מכן אחסן אותו במשתנה המצב 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 וקבוצת המשנה כדי להציג את תת-קבוצת הנתונים על סמך מספר העמוד הנוכחי.

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

קוד זה מחשב את ערכי startIndex ו- endIndex בהתבסס על ערך ה-currentPage state וערך itemsPerPage. לאחר מכן הוא משתמש במשתנים אלה כדי לפצל את מערך הנתונים לקבוצת משנה של פריטים.

לאחר מכן הוסף את הפונקציה handlePageChange. זהו מטפל באירועים שיפעל כאשר משתמש ילחץ על כפתור הבא.

const handlePageChange = (עמוד נבחר) => {
 setCurrentPage (selectedPage.selected);
};

בסך הכל, היישום שלך צריך להיראות כך:

יְבוּא אקסיוס מ"אקסיות";
יְבוּא { useEffect, useState } מ"לְהָגִיב";
פוּנקצִיָהאפליקציה() {
const [נתונים, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemsPage = 10;


 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').לאחר מכן((תְגוּבָה) => {
 setData (response.data);
 });


 setTotalPages(מתמטיקה.ceil (response.data.length / itemsPerPage));
 }, []);


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


const 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-pagete מספק מספר אביזרים המאפשרים לך להתאים אישית את המראה והתחושה של רכיב העימוד כך שיתאימו לצרכי היישום שלך.

הנה כמה דוגמאות.

  • התאם אישית את הלחצנים הבא והקודם באמצעות האביזרים הקודםLabel ו-nextLabel. לדוגמה, אתה יכול להשתמש בתוויות שברון כפי שמוצג להלן.
     previousLabel={"<}
     nextLabel={">>"}
    />
  • התאם אישית את תווית ההפסקה באמצעות אביזר breakLabel. תווית הפסקה היא התווית המוצגת כאשר מספר העמודים גבוה, ורכיב העימוד אינו מסוגל להציג את כל קישורי הדפים. במקום זאת, הוא מציג הפסקה, המיוצגת על ידי תווית הפסקה, בין הקישורים. הנה דוגמה שמשתמשת באליפסיס.
     breakLabel={"..."}
    />
  • התאם אישית את מספר הדפים שיוצגו. אם אינך רוצה להציג את כל העמודים, תוכל לציין את מספר העמודים באמצעות מאפיין pageCount. הקוד שלהלן מציין את ספירת הדפים כ-5.
     pageCount={5}
    />
  • התאמה אישית של המיכל והשיעורים הפעילים. אתה יכול להתאים אישית את שמות המחלקות עבור מיכל העימוד וקישור הדף הפעיל באמצעות האביזרים containerClassName ו-activeClassName, בהתאמה. לאחר מכן תוכל לעצב את רכיב העימוד באמצעות מחלקות אלה עד שיתאים למראה האפליקציה שלך.
     containerClassName={"מיכל עמודים"}
     activeClassName={"עמוד פעיל"}
    />

זו אינה רשימה ממצה של אפשרויות ההתאמה האישית הזמינות. את השאר תוכל למצוא ב מסמכי ספריית מגיבים.

שפר את חווית המשתמש על ידי שימוש ב-Pagining

עימוד הוא תכונה חשובה בכל אפליקציה שמציגה כמויות גדולות של נתונים. ללא עימוד, המשתמשים צריכים לגלול ברשימות ארוכות כדי למצוא את המידע שהם צריכים, וזה גוזל זמן.

עימוד מאפשר למשתמשים לנווט בקלות לנתונים הספציפיים שהם מחפשים על ידי פירוקם לנתחים קטנים יותר וניתנים לניהול. זה לא רק חוסך זמן אלא גם מקל על המשתמשים לעבד את המידע.