مؤلفه صفحه بندی در React – انجمن DEV

Summarize this content to 400 words in Persian Lang
صفحه بندی برای مدیریت کارآمد مجموعه داده های بزرگ، شکستن آنها به قطعات کوچکتر و قابل مدیریت ضروری است. این کار تجربه کاربر را با اجازه دادن به کاربران برای پیمایش در یک صفحه در یک صفحه افزایش می دهد.

در زیر اجرای یک قابل استفاده مجدد است جزء صفحه بندی در React

چی:

الف جزء صفحه بندی در React اجازه می دهد:

نمایش شماره صفحات
پیمایش بین صفحات با Previous و Next دکمه ها
نمایش پویا صفحه فعلی داده ها.

چرا:

صفحه بندی برای مدیریت کارآمد مجموعه داده های بزرگ بسیار مهم است. با نمایش تنها زیر مجموعه ای از داده ها در یک زمان، زمان رندر و بارگذاری در مرورگر را کاهش می دهد. این باعث بهبود تجربه کاربر و عملکرد کلی می شود.

چگونه:

راه حل شامل دو جزء است:

جزء صفحه بندی: منطق صفحه بندی را کنترل می کند، از جمله تولید شماره صفحه، و مدیریت آن Previous، Nextو انتخاب صفحه

جزء برنامه: وضعیت را مدیریت می کند و داده ها را بر اساس صفحه فعلی نمایش می دهد.

پیاده سازی گام به گام

1. ایجاد کنید Pagination جزء

این Pagination مؤلفه شماره صفحه را تولید می کند و شامل می شود Previous و Next دکمه های جهت یابی چهار وسیله را می پذیرد:

totalItems: تعداد کل اقلام.

itemsPerPage: تعداد موارد برای نمایش در هر صفحه.

currentPage: صفحه فعال فعلی.

onPageChange: عملکرد برگشت به تماس برای رسیدگی به تغییرات صفحه.

import React from ‘react’;

const Pagination = ({ totalItems, itemsPerPage, currentPage, onPageChange }) => {
const totalPages = Math.ceil(totalItems / itemsPerPage); // Calculate total number of pages

// Generate an array of page numbers
const pageNumbers = Array.from({ length: totalPages }, (_, index) => index + 1);

return (
<nav>
<ul style={{ display: ‘flex’, listStyle: ‘none’, padding: 0 }}>
<li>
<button
onClick={() => onPageChange(currentPage – 1)} // Previous button
disabled={currentPage === 1} // Disable if on the first page
>
Previous
button>
li>

{pageNumbers.map((number) => (
<li key={number} style={{ margin: ‘0 5px’ }}>
<button
onClick={() => onPageChange(number)} // Page number button
style={{
padding: ‘5px 10px’,
backgroundColor: currentPage === number ? ‘lightblue’ : ‘white’, // Highlight current page
}}
>
{number}
button>
li>
))}

<li>
<button
onClick={() => onPageChange(currentPage + 1)} // Next button
disabled={currentPage === totalPages} // Disable if on the last page
>
Next
button>
li>
ul>
nav>
);
};

export default Pagination;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. صفحه بندی را در کامپوننت اصلی ادغام کنید

این App جزء شامل Pagination جزء و مدیریت وضعیت برای نمایش موارد صحیح بر اساس صفحه فعلی.

import React, { useState } from ‘react’;
import Pagination from ‘./Pagination’;

const App = () => {
const items = Array.from({ length: 50 }, (_, index) => `Item ${index + 1}`); // Mock data
const itemsPerPage = 5; // Items per page

const [currentPage, setCurrentPage] = useState(1); // Current page state

// Calculate indices for slicing the data based on the current page
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem – itemsPerPage;
const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);

// Handle page change
const handlePageChange = (pageNumber) => {
if (pageNumber >= 1 && pageNumber <= Math.ceil(items.length / itemsPerPage)) {
setCurrentPage(pageNumber); // Update the current page
}
};

return (
<div>
<h1>Pagination Exampleh1>

{/* Render Current Items */}
<ul>
{currentItems.map((item, index) => (
<li key={index}>{item}li>
))}
ul>

{/* Render Pagination Component */}
<Pagination
totalItems={items.length} // Total number of items
itemsPerPage={itemsPerPage} // Items per page
currentPage={currentPage} // Current page
onPageChange={handlePageChange} // Callback to handle page change
/>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح کد

1. جزء صفحه بندی:

محاسبه کل صفحات: تعداد کل صفحات با تقسیم تعداد کل موارد بر موارد در هر صفحه و در صورت لزوم گرد کردن آنها محاسبه می شود.

شماره صفحه: لیستی از شماره صفحات را برای پیمایش ایجاد می کند.

دکمه های قبلی/بعدی: این دکمه ها به کاربران اجازه می دهد تا به صفحه قبلی یا بعدی بروید. اگر کاربر قبلاً در صفحه اول یا آخر باشد، آنها غیرفعال می شوند.

برجسته سازی پویا صفحه: صفحه فعلی به صورت بصری برای UX بهتر برجسته شده است.

2. جزء برنامه:

مدیریت دولتی: currentPage state صفحه فعال را ردیابی می کند. این setCurrentPage تابع هر زمان که تغییر صفحه رخ دهد این حالت را به روز می کند.

برش داده ها: currentItems به صورت پویا با برش دادن محاسبه می شوند items آرایه بر اساس صفحه فعلی و تعداد موارد در هر صفحه.

مدیریت تغییر صفحه: handlePageChange تابع مسئول به روز رسانی currentPage وقتی روی شماره صفحه کلیک می شود یا روی Previous یا Next دکمه ها فشرده می شوند

خروجی

داده ها در صفحات نمایش داده می شوند و هر صفحه حاوی تعداد مشخصی از موارد است (itemsPerPage).
این Pagination کامپوننت به صورت پویا اعداد صفحات را رندر می کند و پیمایش بین آنها را مدیریت می کند.
کاربران می توانند روی آن کلیک کنند Previous، Next، یا دکمه های صفحه خاصی برای به روز رسانی داده های نمایش داده شده.

زمان استفاده:

این منطق صفحه بندی برای هر سناریویی که در آن شما نیاز دارید مجموعه داده های بزرگ را به طور موثر نمایش دهید ایده آل است، مانند:

لیست محصولات، مقالات یا کاربران.
نتایج جستجو یا داده‌های API که به ارائه کارآمد در چندین صفحه نیاز دارند.

خلاصه:

چی: جزء صفحه بندی نمایش اعداد صفحات و پیمایش بین آنها را کنترل می کند و تجربه کاربر را هنگام برخورد با مجموعه داده های بزرگ بهبود می بخشد.

چرا: صفحه بندی زمان بارگذاری را کاهش می دهد و با نمایش داده ها در قطعات کوچکتر و قابل مدیریت عملکرد را افزایش می دهد.

چگونه: Pagination مؤلفه شماره صفحه و دکمه های ناوبری را تولید می کند، در حالی که App مؤلفه وضعیت را مدیریت می کند و داده های نمایش داده شده را بر اساس صفحه فعلی به روز می کند.

چه زمانی: این الگو هنگام کار با مجموعه داده های بزرگی که برای رندرینگ کارآمد باید در چندین صفحه تقسیم شوند، مفید است.

import React from 'react';

const Pagination = ({ totalItems, itemsPerPage, currentPage, onPageChange }) => {
  const totalPages = Math.ceil(totalItems / itemsPerPage); // Calculate total number of pages

  // Generate an array of page numbers
  const pageNumbers = Array.from({ length: totalPages }, (_, index) => index + 1);

  return (
    <nav>
      <ul style={{ display: 'flex', listStyle: 'none', padding: 0 }}>
        <li>
          <button
            onClick={() => onPageChange(currentPage - 1)} // Previous button
            disabled={currentPage === 1} // Disable if on the first page
          >
            Previous
          button>
        li>

        {pageNumbers.map((number) => (
          <li key={number} style={{ margin: '0 5px' }}>
            <button
              onClick={() => onPageChange(number)} // Page number button
              style={{
                padding: '5px 10px',
                backgroundColor: currentPage === number ? 'lightblue' : 'white', // Highlight current page
              }}
            >
              {number}
            button>
          li>
        ))}

        <li>
          <button
            onClick={() => onPageChange(currentPage + 1)} // Next button
            disabled={currentPage === totalPages} // Disable if on the last page
          >
            Next
          button>
        li>
      ul>
    nav>
  );
};

export default Pagination;

import React, { useState } from 'react';
import Pagination from './Pagination';

const App = () => {
  const items = Array.from({ length: 50 }, (_, index) => `Item ${index + 1}`); // Mock data
  const itemsPerPage = 5; // Items per page

  const [currentPage, setCurrentPage] = useState(1); // Current page state

  // Calculate indices for slicing the data based on the current page
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);

  // Handle page change
  const handlePageChange = (pageNumber) => {
    if (pageNumber >= 1 && pageNumber <= Math.ceil(items.length / itemsPerPage)) {
      setCurrentPage(pageNumber); // Update the current page
    }
  };

  return (
    <div>
      <h1>Pagination Exampleh1>

      {/* Render Current Items */}
      <ul>
        {currentItems.map((item, index) => (
          <li key={index}>{item}li>
        ))}
      ul>

      {/* Render Pagination Component */}
      <Pagination
        totalItems={items.length} // Total number of items
        itemsPerPage={itemsPerPage} // Items per page
        currentPage={currentPage} // Current page
        onPageChange={handlePageChange} // Callback to handle page change
      />
    div>
  );
};

export default App;