Когда вы разрабатываете на Reactjs, бывают случаи, когда стоит взглянуть на другие библиотеки для получения упакованных и хорошо протестированных компонентов, а не разрабатывать свои собственные компоненты с нуля. Некоторые из этих компонентов очень стабильны и существуют уже довольно давно. Reactstrap - это пример очень стабильной библиотеки, в которой есть несколько общих компонентов многократного использования, которые можно использовать.

Reactstrap имеет предварительно созданные компоненты React без сохранения состояния для Bootstrap 4, которые обеспечивают большую гибкость, и разбиение на страницы является одним из них.

У меня есть много данных, которые я отображаю в таблице HTML (набор данных недостаточно велик, чтобы гарантировать разбиение на страницы на стороне сервера). Для упрощения визуализации данных и навигации я решил добавить к данным разбиение на страницы и посмотрел на набор компонентов ReactStrap pagination в поисках быстрого решения. Я использую Bootstrap для стилизации своего приложения, и это бонус, поскольку библиотека reactstrap была создана для использования bootstrap.

По сути, разбиение на страницы - это простой метод навигации, который позволяет вам разбивать огромные объемы данных в таблицах на более мелкие подмножества, по которым можно легко перемещаться. Я покажу, как я использовал reactstrap в своем решении для разбивки на страницы. В этой статье я предполагаю, что вы знаете, как настроить приложение для реагирования, и сосредоточусь только на бите разбивки на страницы в reactstrap.

Включение reactstrap в приложение.

Вам нужно будет установить в свое приложение reactstrap и его зависимости. В документации по reactstrap есть все шаги, и им очень легко следовать. Прочтите документацию здесь.

  1. Прежде чем вы сможете использовать reactstrap, вам необходимо установить Bootstrap в вашем приложении. Чтобы установить bootstrap, запустите сценарий npm ниже:

2. После установки Bootstrap установите responsestrap в свое приложение, запустив приведенный ниже сценарий npm в своем терминале.

Использование Reactstrap Pagination, PaginationItem и PaginationLink

Я решил создать тупой компонент внешней оболочки под названием TablePagination.js, который объединяет артефакты разбиения на страницы вместе. Для этого:

  1. Создайте файл javascript с именем TablePagination.js, а затем импортируйте React из react и PropTypes из prop-types.
  2. Импортируйте именованный импорт Pagination, PaginationItem и PaginationLink из reactstrap.

Ниже приведен код для TablePagination.js.

  1. Я использовал стрелочную функцию для создания компонента.
  2. Компонент принимает 5 свойств, которые определены в свойствах propTypes. См. ниже:
TablePagination.propTypes = {
 pagesCount: PropTypes.number.isRequired,
 currentPage: PropTypes.number.isRequired,
 handlePageClick: PropTypes.func.isRequired,
 handlePreviousClick: PropTypes.func.isRequired,
 handleNextClick: PropTypes.func.isRequired
};

а.) pageCount: общее количество записей в нашем наборе данных.

б.) currentPage: текущая страница, на которую был выполнен переход.

c.) handlePageClick: функция, которая обрабатывает событие щелчка при нажатии на номер страницы. Эта функция передаст номер текущей страницы, которая будет сохранена в состоянии.

d.) handlePreviousClick: функция, которая обрабатывает событие щелчка при нажатии предыдущей кнопки. Это позволяет перейти на предыдущую (‹

д.) handleNextClick: функция, которая обрабатывает событие щелчка при нажатии следующей (››) кнопки. Это позволяет перейти на следующую страницу.

3. Я использовал деструктуризацию объекта props, чтобы передать свойства как переменные. Это улучшает читаемость, избавляясь от реквизита. Просто взглянув на подпись, вы можете увидеть, какие свойства требуются компоненту.

const TablePagination = ({
 pagesCount,
 currentPage,
 handlePageClick,
 handlePreviousClick,
 handleNextClick
}) => ( ...)

4. Компонент Reactstrap Pagination инкапсулирует Reactstrap PaginationItem, который, в свою очередь, инкапсулирует Reactstrap PaginationLink.

5. Первый элемент PaginationItem внутри Pagination - это предыдущая кнопка. Это отключено, если текущая страница равна нулю или меньше нуля «disabled = {currentPage‹ = 0} ». Я также передаю ему handlePreviousClick, который обрабатывает событие щелчка предыдущей кнопки.

<PaginationItem disabled={currentPage <= 0}>
  <PaginationLink onClick={handlePreviousClick} previous href="#" /></PaginationItem>

6. Следующим элементом PaginationItem после предыдущей кнопки PaginationItem является динамический элемент PaginationItem. Это тот, который генерирует кнопки с номерами страниц.

«Array (pagesCount)»: создает и инициализирует новый объект массива длиной, равной pagesCount.

«[… Array (pagesCount)]. Map (fn)»: с помощью оператора распространения я расширяю массив. После развертывания метод map () создает новый массив PaginationItems. См. Фрагмент ниже.

{[...Array(pagesCount)].map((page, i) => (
 <PaginationItem active={i === currentPage} key={i}>
   <PaginationLink onClick={e => handlePageClick(e, i)} href="#">
     {i + 1}
   </PaginationLink>
 </PaginationItem>
))}

Использование и объединение компонента TablePagination с таблицей с записями

У меня есть набор регистрационных данных, который называется регистрациями. Этот массив регистраций передается компоненту RegistrationList в props. См. Полный компонент RegistrationList ниже.

Этот компонент определяется с помощью стрелочной функции. Первое, что вы заметите, это то, что этот компонент использует обработчик реакции useState для управления состоянием currentPage. См. Фрагмент строки 7 ниже.

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

В этом примере размер страницы установлен на 10. Однако pagesCount рассчитывается путем деления количества записей на pageSize и использования Math.Ceil для результата, чтобы округлить его до ближайшего наибольшего целого числа.

Когда вы щелкаете номер страницы на пейджере, номер currentPage устанавливается равным текущему номеру страницы, по которой щелкнули мышью, с помощью функции ниже, которая, в свою очередь, передается компоненту TablePagination в реквизитах.

const handlePageClick = (e, index) => {
   e.preventDefault();
   setCurrentPage(index);
};

Теперь давайте посмотрим на приведенный ниже фрагмент. Чтобы определить, какие записи отображать, регистрации нарезаются, начиная с позиции, вычисленной путем умножения выбранной currentPage и pageSize. Итак, если текущая страница - 2, мы начнем с позиции 20 в массиве регистраций. Конечная позиция фрагмента вычисляется как (currentPage + 1) * pageSize. Используя текущую страницу как 2, мы закончим на позиции 30.

<tbody>
  {registrations
     .slice(currentPage * pageSize, (currentPage + 1) * pageSize)
     .map(registration => {
       return (
         <tr key={registration.id}>
           <td>
             <a className="btn btn-light">View</a>
           </td>
           <td>
             <Link to={"/registration/" + registration.id}>
               registration.attendee.title}
             </Link>
           </td>
           <td>{registration.attendee.firstName}</td>
           <td>{registration.attendee.lastName}</td>
        </tr>
       );
  })}
</tbody>

Чтобы показать результат

Эту простую разбивку на страницы можно улучшить на стороне сервера. Иллюстрация здесь предназначена для того, чтобы вы начали. В документации Reactstrap более чем достаточно информации о том, как использовать компоненты.

Надеюсь, это поможет и удачного кодирования!