Последние несколько месяцев я и мой руководитель работали над веб-приложением, построенным на ReactJS и Ant Design CSS Framework. Мы представляли наши данные в виде каталогов / плиток, и это создавало своего рода бесконечную прокрутку с каждым увеличением данных. Итак, подумал о реализации просмотра страницы для данных приложения.
Муравей Дизайн
Система дизайна для продуктов корпоративного уровня. Создайте эффективный и приятный опыт работы.
Установка:
$ npm install antd$ yarn add antd
После добавления зависимости:
импортировать {Pagination} из "antd";
Установите начальные состояния React:
elementsPerPage - количество элементов, которые вы хотите отобразить на одной странице. Массив currentPageElements предназначен для хранения элементов, отображаемых для каждой страницы, а смещение помогает выбрать эти элементы. pagesCount устанавливает общее количество страниц для отображения.
Реализация разбивки на страницы с полученными данными:
В приведенном ниже фрагменте кода мы извлекаем данные для отображения в каталоге с разбивкой на страницы. getAllElements - это асинхронная функция, которая извлекает данные из REST API и сохраняет их в состоянии allElements.
Здесь мы реализовали функцию для установки состояния pageCount, в котором хранится количество страниц для отображения, с функцией обратного вызова для установки элементов для текущей страницы.
Здесь мы реализовали функцию для вычисления элементов для текущей страницы в зависимости от elementsPerPage и состояния смещения.
Здесь, чтобы отобразить список страниц с разбивкой на страницы, мы использовали компонент antd P« agination » с необходимыми реквизитами. defaultCurrent используется для обозначения страницы по умолчанию, handlePageClick - это обработчик для установки элементы для каждой страницы (определены ниже), размер списка разбивки на страницы, всего - это количество элементов , showTotal - строка, указывающая диапазон элементов на текущей странице. pageSize - количество элементов на каждой странице. Компонент списка страниц появляется тогда и только тогда, когда нам нужно отобразить более одной страницы, как указано в приведенной выше логике.
handlePageClick - это функция-обработчик, которая вычисляет смещение текущей страницы и вызывает функцию обратного вызова setElementsForCurrentPage для установки элементов для текущей измененной страницы.
Теперь просто верните переменную состояния currentPageElements, чтобы отображать элементы как хотите, с разбивкой на страницы.
Обычно я использую компонент Карточка библиотеки antd. Вы можете использовать загрузочную карту или любой макет карты для своего дизайна.
Например:
showCatalogicData = () => {
return this.state.currentPageElements.map(data => {
return (
<Card
key={data.id}
className="card-item"
style={{ width: 300 }}
>
<Meta title={data.Title}/>
</Card>
)
});
}
Вот как мы можем реализовать разбиение на страницы в React-приложении. Вы можете проверить этот репозиторий для получения полного кода. Пометьте репозиторий на предмет будущих обновлений.
Ознакомьтесь с этими ссылками, чтобы понять CSS-фреймворк Ant design.
Хлопайте, если вам понравилась эта статья.
