Как можно легко реализовать пагинацию страниц с использованием react-paginate в данном случае?

Я хочу создать простой сайт на React с использованием Tailwind CSS. Одной из страниц будет блог, контент для которого будет храниться в подпапке проекта. Например, компонент Blog.jsx будет находиться в папке src/Pages, а страницы с контентом блога будут располагаться в директории src/Pages/BlogPages и иметь имена от 1.jsx до 100.jsx. Эти страницы должны быть связаны с пагинацией. 

Ниже приведен код для компонента блога, который по умолчанию загружает контент из страницы 1.jsx. 

Blog.jsx:
<pre><code class="javascript">import React from "react"
import Pagination from "../Components/Pagination"
import Blog1 from "./BlogPages/1"

const Blog = () => {
    return (
        <div>
            <div>
                <Blog1 />
            </div>
            <div className='max-w-[1240px] mx-auto py-3 px-[5px]'>
                <Pagination />
            </div>
        </div>
    )
}

export default Blog</code></pre> 

Pagination.jsx:
<pre><code class="javascript">import React from "react";
import ReactPaginate from 'react-paginate'
import {BsChevronLeft,BsChevronRight } from "react-icons/bs"

const Pagination = () => {
    return (
        <div>
            <ReactPaginate
                breakLabel={
                    <span className="mr-2 sm:mr-4">...</span>
                }
                nextLabel={
                    <span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
                        <BsChevronRight />
                    </span>
                }
                // onPageChange={handlePageClick}
            />
        </div>
    )
}

export default Pagination</code></pre> 

Можете подсказать, как реализовать пагинацию, чтобы переключаться между страницами с контентом блога?
  • 12 февраля 2025 г. 15:14
Ответы на вопрос 2
Конечно! Чтобы реализовать пагинацию для вашего блога, вам нужно обновить компонент `Blog` так, чтобы он управлял состоянием текущей страницы, и передавать этот статус в компонент `Pagination`. Затем, при переключении страниц, вы будете загружать соответствующий контент.

Вот пример, как это можно сделать:

### 1. Обновите `Blog.jsx`:

```javascript
import React, { useState } from "react";
import Pagination from "../Components/Pagination";
// Импортируем все страницы блога
const BlogPages = Array.from({ length: 100 }, (_, i) => {
    return require(`./BlogPages/${i + 1}.jsx`).default;
});

const Blog = () => {
    const [currentPage, setCurrentPage] = useState(1);

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const CurrentBlogPost = BlogPages[currentPage - 1]; // Индексы страниц начинаются с 0

    return (
        <div>
            <div>
                <CurrentBlogPost />
            </div>
            <div className="max-w-[1240px] mx-auto py-3 px-[5px]">
                <Pagination
                    currentPage={currentPage}
                    onPageChange={handlePageChange}
                    pageCount={BlogPages.length}
                />
            </div>
        </div>
    );
}

export default Blog;
```

### 2. Обновите `Pagination.jsx`:

Теперь вам нужно передать текущую страницу и функцию смены страницы в `Pagination`, а также обработать логику изменения страницы:

```javascript
import React from "react";
import ReactPaginate from 'react-paginate';
import { BsChevronLeft, BsChevronRight } from "react-icons/bs";

const Pagination = ({ currentPage, onPageChange, pageCount }) => {
    const handlePageClick = (data) => {
        const selectedPage = data.selected + 1; // react-paginate возвращает индекс, начиная с 0
        onPageChange(selectedPage);
    };

    return (
        <div>
            <ReactPaginate
                pageCount={pageCount}
                onPageChange={handlePageClick}
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                breakLabel={<span className="mr-2 sm:mr-4">...</span>}
                nextLabel={
                    <span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
                        <BsChevronRight />
                    </span>
                }
                previousLabel={
                    <span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
                        <BsChevronLeft />
                    </span>
                }
                containerClassName={'flex space-x-2'}
                pageClassName={'w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md cursor-pointer'}
                activeClassName={'bg-blue-500 text-white'}
                disabledClassName={'opacity-50 cursor-not-allowed'}
            />
        </div>
    );
}

export default Pagination;
```

### Объяснение:

1. **Импорт контента:** В `Blog.jsx` мы создаем массив `BlogPages`, который содержит все импорты страниц блога от `1.jsx` до `100.jsx`. Используем метод `require`, чтобы динамически загружать компоненты.

2. **Состояние текущей страницы:** Мы используем `useState` для хранения текущей страницы. По умолчанию это `1`.

3. **Обновление страницы:** Функция `handlePageChange` обновляет состояние текущей страницы при клике на пагинацию.

4. **Передача свойств в `Pagination`:** Мы передаем текущее состояние страницы, функцию для изменения страницы и общее количество страниц в компонент `Pagination`.

5. **Обработка кликов:** В `Pagination.jsx` мы обрабатываем клики по страницам через `handlePageClick`, который изменяет текущую страницу с учетом того, что элемент `selected` возвращает индекс, начиная с 0.

Теперь вы сможете переключаться между страницами блога, и контент будет обновляться в соответствии с выбранной страницей.
Если правильно понял - то можно сделать объект, типа: 

const pages = {1: Blog1}

//render
const Page = pages[page]
<div><Page /></div>
Похожие вопросы