Поиск по сайту:

Как создать компонент вкладок с помощью React

Введение

Если вы когда-либо создавали веб-приложение, есть большая вероятность, что в тот или иной момент вы создавали интерфейс документа с вкладками. Вкладки позволяют разбивать сложные интерфейсы на управляемые подразделы, между которыми пользователь может быстро переключаться. Вкладки являются распространенным компонентом пользовательского интерфейса и важны для понимания того, как их реализовать.

В этой статье вы узнаете, как создать многоразовый компонент-контейнер вкладок, который можно использовать отдельно или с вашими существующими компонентами.

Предпосылки

Прежде чем приступить к работе с этим руководством, вам потребуется следующее:

  • Вам потребуется среда разработки с запуском How To Install Node.js в Ubuntu 18.04.
  • В этом руководстве вы создадите приложения с помощью Как настроить проект React с помощью Create React App
  • Вам также потребуются базовые знания JavaScript, которые вы можете найти в сети разработчиков Mozilla.

Это руководство было протестировано на Node.js версии 10.20.1 и npm версии 6.14.4.

Шаг 1 — Создание пустого проекта

На этом этапе вы создадите новый проект, используя приложение Create React. Затем вы удалите пример проекта и связанные с ним файлы, установленные при начальной загрузке проекта.

Для начала создайте новый проект. В терминале запустите следующий скрипт, чтобы установить новый проект с помощью create-react-app:

  1. npx create-react-app react-tabs-component

После завершения проекта перейдите в каталог:

  1. cd react-tabs-component

В новой вкладке или окне терминала запустите проект с помощью сценария запуска Create React App. Браузер будет автоматически обновляться при изменениях, поэтому оставьте этот скрипт запущенным, пока вы работаете:

  1. npm start

Это запустит локально работающий сервер. Если проект не открылся в окне браузера, вы можете открыть его, посетив http://localhost:3000/. Если вы запускаете это с удаленного сервера, адрес будет http://ваш_домен:3000.

Ваш браузер загрузит шаблонное приложение React, включенное в состав Create React App:

Вы будете создавать совершенно новый набор пользовательских компонентов, поэтому вам нужно будет начать с очистки некоторого шаблонного кода, чтобы у вас был пустой проект.

Для начала откройте src/App.js в текстовом редакторе. Это корневой компонент, который внедряется на страницу. Все компоненты будут начинаться отсюда. Дополнительную информацию о App.js можно найти в статье Как настроить проект React с помощью Create React App.

Вы увидите такой файл:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Удалите строку import logo from ./logo.svg;. Затем замените все в операторе return, чтобы он возвращал набор тегов div и h1. Это даст вам действительную страницу, которая возвращает h1, которая отображает демонстрацию вкладок. Окончательный код будет выглядеть так:


import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <h1>Tabs Demo</h1>
    </div>
  );
}

export default App;

Сохраните и выйдите из текстового редактора.

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

В окне терминала введите следующую команду, чтобы удалить логотип:

  1. rm src/logo.svg

Теперь, когда проект настроен, вы можете создать свой первый компонент.

Шаг 2 — Создание компонента вкладок

На этом шаге вы создадите новую папку и компонент Вкладки, который будет отображать каждую вкладку Вкладка.

Сначала создайте папку в каталоге src с именем components:

  1. mkdir src/components

Внутри папки components создайте новый файл с именем Tabs.js:

  1. nano src/components/Tabs.js

Добавьте следующий код в новый файл Tabs.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';

Это импорт, необходимый для создания этого компонента. Этот компонент будет отслеживать, какая вкладка активна, отображать список вкладок и содержимое активной вкладки.

Затем добавьте следующий код, который будет использоваться для отслеживания состояния и отображения активной вкладки под imports в Tabs.js:

...

class Tabs extends Component {
  static propTypes = {
    children: PropTypes.instanceOf(Array).isRequired,
  }

  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.children[0].props.label,
    };
  }

  onClickTabItem = (tab) => {
    this.setState({ activeTab: tab });
  }

...

Начальное состояние добавляется для активной вкладки и начинается с 0 в массиве вкладок, которые вы будете создавать.

onClickTabItem обновит состояние приложения до текущей вкладки, которую щелкнул пользователь.

Теперь вы можете добавить функцию рендеринга в тот же файл:

...

  render() {
    const {
      onClickTabItem,
      props: {
        children,
      },
      state: {
        activeTab,
      }
    } = this;

    return (
      <div className="tabs">
        <ol className="tab-list">
          {children.map((child) => {
            const { label } = child.props;

            return (
              <Tab
                activeTab={activeTab}
                key={label}
                label={label}
                onClick={onClickTabItem}
              />
            );
          })}
        </ol>
        <div className="tab-content">
          {children.map((child) => {
            if (child.props.label !== activeTab) return undefined;
            return child.props.children;
          })}
        </div>
      </div>
    );
  }
}

export default Tabs;

Этот компонент отслеживает, какая вкладка активна, отображает список вкладок и содержимое активной вкладки.

Компонент Вкладки использует следующий компонент, который вы создадите, под названием Вкладка.

Шаг 3 — Создание компонента вкладки

На этом шаге вы создадите компонент Tab, который будете использовать для создания отдельных вкладок.

Создайте новый файл с именем Tab.js в папке components:

  1. nano src/components/Tab.js

Добавьте следующий код в файл Tab.js:


import React, { Component } from 'react';
import PropTypes from 'prop-types';

И снова вы импортируете React из react и импортируете PropTypes. PropTypes – это специальное свойство propTypes, используемое для проверки типов свойств в компоненте.

Затем добавьте следующий код под операторами import:

...
class Tab extends Component {
  static propTypes = {
    activeTab: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
  };

  onClick = () => {
    const { label, onClick } = this.props;
    onClick(label);
  }

  render() {
    const {
      onClick,
      props: {
        activeTab,
        label,
      },
    } = this;

    let className = 'tab-list-item';

    if (activeTab === label) {
      className += ' tab-list-active';
    }

    return (
      <li
        className={className}
        onClick={onClick}
      >
        {label}
      </li>
    );
  }
}

export default Tab;

PropTypes в этом компоненте используются для того, чтобы activeTab и label были строковыми и обязательными. onClick также является обязательной функцией.

Компонент Tab отображает имя вкладки и добавляет дополнительный класс, если вкладка активна. При нажатии компонент запускает обработчик onClick, который сообщает компоненту Tabs, какая вкладка должна быть активной.

Шаг 4 — Добавление CSS для стиля приложения

Помимо создания компонентов, вы добавите CSS, чтобы компоненты выглядели как вкладки.

Внутри файла App.css удалите все CSS по умолчанию и добавьте следующий код:

[label react-tabs-component/src/App.css] .tab-list {
  border-bottom: 1px solid #ccc;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
}

.tab-list-active {
  background-color: white;
  border: solid #ccc;
  border-width: 1px 1px 0 1px;
}

Вкладки будут выровнены, а вкладка active получит рамку, чтобы она выделялась при нажатии.

Шаг 5 — Обновление App.js

Теперь, когда компоненты и связанные стили готовы, обновите компонент App, чтобы использовать их.

Сначала обновите импорт, включив в него компонент Tabs:

import React from 'react';
import Tabs from "./components/Tabs";
import "./App.css";

Затем обновите код в операторе return, чтобы включить импортированный компонент Tabs:

...

function App() {
  return (
    <div>
      <h1>Tabs Demo</h1>
      <Tabs>
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
        <div label="Croc">
          After 'while, <em>Crocodile</em>!
        </div>
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
      </Tabs>
    </div>
  );
}

export default App;

Элементы div со связанными метками дают вкладкам их содержимое.

С добавлением Tabs в компонент App у вас теперь будет работающий интерфейс с вкладками, позволяющий переключаться между разделами:

Вы можете просмотреть этот репозиторий Github, чтобы увидеть завершенный код.

Заключение

В этом руководстве вы создали компонент вкладки, используя React для управления и обновления состояния вашего приложения.

Отсюда вы можете узнать о других способах стилизации компонентов React для создания еще более привлекательного пользовательского интерфейса.

Вы также можете просмотреть полную серию How To Code in React.js на DigitalOcean, чтобы узнать еще больше о разработке с помощью React.