Когда вы разрабатываете на Reactjs, бывают случаи, когда стоит взглянуть на другие библиотеки для получения упакованных и хорошо протестированных компонентов, а не разрабатывать свои собственные компоненты с нуля. Некоторые из этих компонентов очень стабильны и существуют уже довольно давно. Reactstrap - это пример очень стабильной библиотеки, в которой есть несколько общих компонентов многократного использования, которые можно использовать.
Reactstrap имеет предварительно созданные компоненты React без сохранения состояния для Bootstrap 4, которые обеспечивают большую гибкость, и разбиение на страницы является одним из них.
У меня есть много данных, которые я отображаю в таблице HTML (набор данных недостаточно велик, чтобы гарантировать разбиение на страницы на стороне сервера). Для упрощения визуализации данных и навигации я решил добавить к данным разбиение на страницы и посмотрел на набор компонентов ReactStrap pagination в поисках быстрого решения. Я использую Bootstrap для стилизации своего приложения, и это бонус, поскольку библиотека reactstrap была создана для использования bootstrap.
По сути, разбиение на страницы - это простой метод навигации, который позволяет вам разбивать огромные объемы данных в таблицах на более мелкие подмножества, по которым можно легко перемещаться. Я покажу, как я использовал reactstrap в своем решении для разбивки на страницы. В этой статье я предполагаю, что вы знаете, как настроить приложение для реагирования, и сосредоточусь только на бите разбивки на страницы в reactstrap.
Включение reactstrap в приложение.
Вам нужно будет установить в свое приложение reactstrap и его зависимости. В документации по reactstrap есть все шаги, и им очень легко следовать. Прочтите документацию здесь.
- Прежде чем вы сможете использовать reactstrap, вам необходимо установить Bootstrap в вашем приложении. Чтобы установить bootstrap, запустите сценарий npm ниже:
2. После установки Bootstrap установите responsestrap в свое приложение, запустив приведенный ниже сценарий npm в своем терминале.
Использование Reactstrap Pagination, PaginationItem и PaginationLink
Я решил создать тупой компонент внешней оболочки под названием TablePagination.js, который объединяет артефакты разбиения на страницы вместе. Для этого:
- Создайте файл javascript с именем TablePagination.js, а затем импортируйте React из react и PropTypes из prop-types.
- Импортируйте именованный импорт Pagination, PaginationItem и PaginationLink из reactstrap.
Ниже приведен код для TablePagination.js.
- Я использовал стрелочную функцию для создания компонента.
- Компонент принимает 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 более чем достаточно информации о том, как использовать компоненты.
Надеюсь, это поможет и удачного кодирования!