Разбивка приложения React на страницы с помощью Semantic UI

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

я собираюсь использовать МЕНЯТЬ api, чтобы иметь данные для ссылки в моем примере.

Я также собираюсь использовать Аксиос библиотека на основе обещаний, чтобы дать вам представление о том, как получать данные в Интернете и связывать их с компонентом разбиения на страницы, предоставляемым семантическим пользовательским интерфейсом.

Для начала убедитесь, что вы установили Semantic UI в свое приложение React. Инструкцию, как это сделать, можно найти здесь.

После того, как вы установили его и ссылку css внутри вашего index.html, теперь вы можете импортировать множество различных компонентов, предлагаемых вам, но для этого примера мы будем использовать только Пагинация составная часть.

import React from 'react';
import { Pagination } from 'semantic-ui-react';

const App = () => {
  return (<div className="App">
  	<Pagination />
  </div>);
};

export default App;

Итак, теперь мы готовы использовать компонент Pagination, но что нам с ним делать и как заставить его работать правильно? Компонент Pagination, как и все компоненты, имеет атрибуты, которые вы можете установить для управления своими компонентами. Вы можете увидеть их все в документации, но нам нужно будет использовать только некоторые из них, чтобы заставить его работать.

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

import React, { useState, useEffect } from 'react';
import { Pagination } from 'semantic-ui-react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);
  const [apiUrl, setApiUrl] = useState('
  
  useEffect(() => {
  	axios.get(apiUrl).then(response => {
  		setData(response.data.results);
    });
  }, [apiUrl]);
  
  return (<div className="App">
  	<Pagination />
  </div>);
};

export default App;

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

import React, { useState, useEffect } from 'react';
import { Pagination } from 'semantic-ui-react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);
  const [activePage, setActivePage] = useState(1);
  const [apiUrl, setApiUrl] = useState('
  
  useEffect(() => {
  	axios.get(apiUrl).then(response => {
      setData(response.data.results);
    });
  }, [apiUrl]);
  
  const onChange = (e, pageInfo) => {
  	setActivePage(pageInfo.activePage);
    setApiUrl(' + page.activePage.toString());
  };
  
  return (<div className="App">
  	<Pagination 
      activePage={activePage}
      onPageChange={onChange}
      totalPages={10}
      ellipsisItem={null}
    />
  </div>);
};

export default App;

Первое, что я сделал, это установил атрибут activePage равным переменной activePage, которую я установил в своем состоянии.

Второй атрибут, onPageChange, запустит заданную функцию, когда компонент обнаружит, что был нажат новый номер страницы. Его первым параметром будет объект события, а вторым — объект с информацией, переданной в компонент. Мы хотим использовать свойство activePage.

После того, как я установил активную страницу, я обновляю свой URL-адрес API. Моя функция useEffect следит за тем, чтобы увидеть, есть ли какие-либо изменения, внесенные в переменную apiUrl, если они есть, она повторно запустит заданную функцию, в этом случае она сделает новый HTTP-запрос для получения дополнительных данных от API.

Если вам нужна дополнительная информация о работе с Semantic UI или React, оставьте комментарий ниже или забронируйте сеанс.