Для создания пагинации на 18 версии React без использования библиотеки Material-UI, вам потребуется следовать нескольким шагам.
1. Настройка компонента пагинации: Создайте новый компонент Pagination.js, который будет отображать кнопки пагинации и обрабатывать события переключения страниц. Внутри компонента у вас должно быть состояние, хранящее текущую выбранную страницу.
2. Вычисление количества страниц: Вам понадобится вычислить общее количество страниц, исходя из общего количества элементов, которые вам нужно отобразить, и количества элементов, которые вы хотите видеть на каждой странице. Например, если у вас есть 100 элементов и вы хотите отображать по 10 элементов на странице, то количество страниц будет равно 10.
3. Отображение кнопок пагинации: Определите логику отображения кнопок пагинации в компоненте Pagination.js. В зависимости от общего количества страниц и текущей выбранной страницы, вы можете решить, какие кнопки нужно отобразить. Например, если у вас есть 10 страниц и текущая выбранная страница - 5, то можно отобразить кнопки 1, 4, 5, 6, 10, чтобы пользователь мог переходить на предыдущую и следующую страницу, а также на первую и последнюю страницы.
4. Обработка событий переключения страницы: Реализуйте логику обработки событий переключения страниц в компоненте пагинации. Используйте функцию обратного вызова, чтобы извещать родительский компонент о выбранной странице. Например, при нажатии на кнопку пагинации можно вызвать функцию onPaginate с номером выбранной страницы в качестве аргумента.
5. Использование пагинации в родительском компоненте: Импортируйте компонент Pagination.js в родительский компонент и поместите его в нужное место вашего приложения. Передайте необходимые данные (количество элементов, элементы на странице и т. д.) в компонент пагинации, а также определите функцию обратного вызова onPaginate, которая будет обрабатывать выбранную страницу.
В итоге, созданный вами компонент Pagination.js позволит вам отображать кнопки пагинации, вычислять количество страниц и обрабатывать события переключения страницы без использования библиотеки Material-UI.