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

В этом руководстве я покажу вам , как создать компонент вкладки Bootstrap в React. В обычном bootstrap создание компонента вкладки — простая задача. Но создавать внутри React.js немного сложно. Нам нужно полагаться на состояние для отображения активных вкладок. Итак, в этом примере мы создадим компонент Tab, используя React.js. Компоненты вкладок позволяют разбивать сложные пользовательские интерфейсы на более управляемые подразделы, между которыми пользователь может быстро переключаться. Панель навигации — не всегда лучшее решение. Итак, мы будем использовать классы Bootstrap 4 для отображения компонента Tab .

Если вы хотите узнать больше о React и Redux, затем ознакомьтесь с этим курсом React 16.6 — Полное руководство (включая React Router и Redux).

# Создание компонента вкладки Bootstrap в React

Мы начинаем наше руководство с установки React.js с помощью создать-реагировать-приложение. Затем мы устанавливаем Bootstrap 4 и используем классы Bootstrap — Navs css.

# Шаг 1. Установите React.js.

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

 npm install  -g create-response-appcreate-react-app react-tab 

# Шаг 2: Установите Bootstrap 4.

Введите следующую команду.

 npm install bootstrap --save # oryarn add bootstrap 

Импортируйте файл bootstrap.min.css в файл App.js .

//App.jsimport '../ node_modules/bootstrap/dist/css/bootstrap.min.css '; 

# Шаг 3: Создайте три компонента.

Внутри папки src создайте одну папку под названием

Создайте три файла в папке components .

  1. TabContent .js
  2. TabList.js
  3. Tab.js

Хорошо, теперь напишите следующий код внутри файла TabContent.js .

//TabContent.jsimport React, {Component} from 'response'; import '../App.  css '; экспорт класса по умолчанию TabContent расширяет компонент {render () {return (
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia . Fugiat velit proident aliquip nisi incididunt nostrud working proident est nisi. Irure Magna Elit Commodo Anim Ex Veniam Culpa Eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consquat eu adipisicing Minimal Anim aliquip Cupidatat culpa excepteur quis. Occaecat sit eu fitness irure Lorem incididunt nostrud.
Объявление париатур nostrud паритетное упражнение ipsum ipsum culpa mollit Commodo mollit ex. Aute sunt incididunt amet Commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod сладострастные упражнения cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet упражнения duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla Laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Нулла ут дуис ipsum ниси элит фугиат коммодосунт репрехендерит labourum veniam eu veniam. Eiusmod минимальное упражнение fugiat irure ex labore incididunt do fugiat Commodo aliquip sit id deserunt resphenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum labouris ipsum Commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim prechenderit. Ullamco conctetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis Commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consquat non.
); }}

Итак, этот компонент отвечает за отображение информации после того, как пользователь щелкнул соответствующие вкладки. Также напишите код css внутри файла App.css .

//App.css.up {margin-top: 50px} 

Теперь импортируйте этот файл в файл src >> App.js .

//App.jsimport React, {Component} из 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css';import TabContent из' ./components/TabContent';class  Приложение расширяет компонент {render () {return ();  }} экспортировать приложение по умолчанию; 

Сохраните файл и запустите React development сервер с помощью следующей команды.

 yarn start 

# Шаг 4: Создайте компонент TabList.js.

Теперь этот компонент отвечает за отображение элементов вкладки. Итак, когда мы щелкаем любой из элементов вкладки, мы показываем информацию, относящуюся к этому элементу. Итак, этот компонент TabList.js ожидает массив элементов. Теперь мы уже определили элементы внутри файла TabContent.js . Поэтому нам нужно установить этот компонент TabList.js в качестве родительского компонента. Итак, сначала позвольте нам сделать это.

//TabContent.jsimport React, {Component} из 'react'; импорт TabList из './TabList';import' ../App. css '; экспорт класса по умолчанию TabContent расширяет компонент {render () {return (
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrudercise proident est nisi. Occaecat sit eu excitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur training ipsum ipsum culpa mollit Commodo mollit ex. Aute sunt incididunt ametmodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod сладострастные упражнения cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet упражнения duis deserunt. Anim id labore elit adipisic ing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla Laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Нулла ут дуис ipsum ниси элит фугиат коммодосунт репрехендерит labourum veniam eu veniam. Eiusmod минимальное упражнение fugiat irure ex labore incididunt do fugiat Commodo aliquip sit id deserunt resphenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum labouris ipsum Commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim prechenderit. Ullamco conctetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis Commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consquat non.
); }}

Итак, мы установили родительский компонент в TabList , и все дочерние элементы являются его содержимым. Кроме того, мы определили метку для каждого дочернего компонента.

Теперь добавьте следующий код в файл TabList.js .

//TabList.jsimport React, {Component} из 'react'; импорт PropTypes из 'prop-types'; импорт Tab из './Tab'; экспорт класса по умолчанию TabList расширяет Component {static propTypes = {children: PropTypes.instanceOf  (Массив) .isRequired,} конструктор (реквизиты) {супер (реквизиты);  this.state = {activeTab: this.props.children [0] .props.label,};  } onClickTabItem = (вкладка) => {this.setState ({activeTab: tab});  } render () {const {onClickTabItem, реквизиты: {дети}, состояние: {activeTab}} = это;  return (
{children.map ((child) => {if (child.props.label! == activeTab) return undefined; return child.props.children;} )}
); }}

Здесь весь контент будет доступен как дочерний, потому что этот компонент является родительским. Таким образом, мы можем получить доступ через this.props.children. По умолчанию активная вкладка будет первым элементом навигации, поэтому установите состояние activeTab в качестве первого элемента.

Если пользователь щелкнет другую вкладку, то activeTab будет соответствующим образом изменен.

Теперь мы сравнили значения label . Нам нужно сравнить, чтобы отобразить информацию на основе активной вкладки. Поэтому, если метка дочерних элементов и активной вкладки будет одинаковой, мы отобразим данные. В противном случае мы отображаем undefined .

Когда пользователь щелкает другие вкладки, этот компонент повторно визуализирует и отображает данные соответственно на основе activeTab .

Итак, наконец, нам нужно написать следующий код внутри файла Tab.js .

//Tab  .jsimport React, {Component} из 'react'; импорт PropTypes из 'prop-types'; вкладка экспорта по умолчанию расширяет Component {static propTypes = {activeTab: PropTypes.string.isRequired, label: PropTypes.string.isRequired, onClick:  PropTypes.func.isRequired,};  onClick = () => {const {метка, onClick} = this.props;  onClick (метка);  } render () {const {onClick, реквизиты: {activeTab, label}} = это;  let className = 'nav-item nav-link';  если (activeTab === метка) {className + = 'active';  } return ( {label} );  }} 

Компонент Tab.js отображает имя вкладки и добавляет класс, если вкладка активна. При нажатии компонент запускает обработчик, который сообщит Tabs , какая вкладка должна быть активной . В соответствии с активной вкладкой мы отображаем информацию, которая есть. Мы сделали это с помощью компонента вкладки Bootstrap в React.

Сохраните файл, и вы увидите что-то вроде этого.

Мы также можем отображать традиционный способ вкладок, используя этот className внутри

//TabList.js 
{children.map ((child) => {const {label} = child.props; return ();})}

Наконец, наше руководство по Create Bootstrap Tab Component In React завершено. Спасибо за этот пример.

Оцените статью
nanomode.ru
Добавить комментарий