Создание пользовательского компонента разбивки на страницы в ReactJS с нуля

Разбиение на страницы — это обычная функция веб-приложений, которая позволяет пользователям перемещаться по большому набору данных, разбивая его на более мелкие и более управляемые фрагменты. В этой статье мы рассмотрим, как с нуля создать собственный компонент разбиения на страницы в ReactJS, предоставляя пользователям интуитивно понятный и настраиваемый опыт разбиения на страницы.

Настройка проекта

Давайте настроим новый проект React, используя Create React App. Откройте терминал и выполните следующую команду:

npx create-react-app pagination-demo

После создания проекта перейдите в каталог проекта:

cd pagination-demo

Создание компонента пагинации

В каталоге src создайте новый файл с именем Pagination.js. Здесь мы определим наш пользовательский компонент разбивки на страницы.

import React from 'react';

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pageNumbers = [];

  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li
            key={number}
            className={currentPage === number ? 'active' : ''}
            onClick={() => onPageChange(number)}
          >
            {number}
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

В приведенном выше коде мы определяем Pagination компонент как функциональный компонент, который принимает три реквизита: currentPage, totalPages и onPageChange. Свойство currentPage представляет текущую активную страницу, totalPages представляет общее количество страниц, а onPageChange представляет собой функцию обратного вызова, запускаемую при нажатии на страницу.

Мы генерируем массив номеров страниц внутри компонента с помощью цикла. Затем мы визуализируем список номеров страниц, выделяя текущую страницу и прикрепляя обратный вызов onPageChange к каждому элементу списка.

Использование компонента пагинации

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

В каталоге src создайте новый файл с именем App.js и замените его содержимое следующим кодом:

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

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

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

  return (
    <div className="App">
      <h1>Sample Application</h1>
      <div className="data-container">
        {/* Render your data here */}
      </div>
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default App;

В приведенном выше коде мы импортируем компонент Pagination и используем его в компоненте App. Мы устанавливаем переменную состояния currentPage с помощью хука useState и определяем totalPages как константу.

Мы также определяем функцию handlePageChange, которая обновляет состояние currentPage при нажатии на страницу.

Внутри оператора return вы можете заменить div на имя класса data-container с вашей собственной логикой рендеринга данных. Компонент Pagination размещается ниже контейнера данных, передавая необходимые реквизиты.

Стилизация компонента пагинации

Наконец, давайте добавим несколько стилей CSS, чтобы наша нумерация страниц

В каталоге src создайте новый файл с именем Pagination.css и добавьте следующий код CSS:

.pagination {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.pagination li {
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ccc;
  margin-right: 4px;
}

.pagination li.active {
  background-color: #ccc;
  color: #fff;
}

В приведенном выше коде мы определяем стили CSS для компонента Pagination. Класс .pagination оформляет неупорядоченный список, содержащий номера страниц, отображая его в виде горизонтальной строки без маркеров. Стили .pagination li каждого элемента списка задают ему рамку, отступы и поля. Класс .pagination li.active выделяет активную страницу другим цветом фона и цветом текста.

Чтобы связать файл CSS с компонентом Pagination, откройте файл Pagination.js и добавьте следующий оператор импорта вверху:

import './Pagination.css';

Сохраните файл, и теперь компонент Pagination будет оформлен в соответствии с правилами CSS, определенными в Pagination.css.

Вы можете дополнительно настроить стили в соответствии с требованиями дизайна вашего приложения. Не стесняйтесь изменять код CSS, чтобы добиться желаемого внешнего вида.

Заключение

Поздравляем! Вы успешно создали собственный компонент разбивки на страницы в ReactJS с нуля. Создав этот многоразовый компонент, вы сможете легко включить в свои приложения функции разбиения на страницы и предоставить своим пользователям удобную навигацию.

Помните, что вы можете еще больше улучшить компонент, добавив дополнительные функции, такие как кнопки «Предыдущий/Далее», показ многоточия для длинных списков страниц или интегрировав его с API для динамической выборки данных.

Не стесняйтесь экспериментировать с кодом и исследовать различные способы расширения и настройки компонента разбивки на страницы в соответствии с вашими конкретными потребностями.

Удачного кодирования!

Создание пользовательского компонента разбивки на страницы в ReactJS с нуля