Как создать Accordion React с нуля без использования внешней библиотеки

Как создать Accordion React с нуля без использования внешней библиотеки

От автора: как вы, возможно, знаете, есть много приложений, использующих контейнер accordions, таких как отображение списка часто задаваемых вопросов, различных меню и подменю, для отображения различных местоположений конкретной компании и так далее. Итак, в этой статье мы рассмотрим, как построить accordion в React полностью с нуля, шаг за шагом, без использования какой-либо внешней библиотеки.

Мы будем использовать синтаксис React Hooks для создания приложения в React. Вы можете увидеть демонстрацию приложения здесь. Итак, приступим.

Начальная настройка проекта

Создайте новый проект, используя create-react-app:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

После того, как проект будет создан, удалите все файлы из папки src и создайте файлы index.js, App.js и styles.css внутри src. Также, внутри папки src, создайте новую папку с именем utils. Откройте файл styles.css и добавьте в него содержимое отсюда.

Как создать начальные страницы

Откройте файл src/App.js и добавьте в него следующий контент:

Здесь мы используем свойства объекта accordionData для отображения содержимого контейнера accordion. Для свойства content мы используем синтаксис литерала шаблона ES6 (), чтобы мы могли распределить контент по нескольким строкам, и мы использовали фиктивный текст lorem ipsum.

Теперь откройте файл src/index.js и добавьте в него следующее содержимое:

Теперь, если вы запустите приложение с помощью команды yarn start из терминала, вы увидите следующий экран:

Как создать Accordion React с нуля без использования внешней библиотеки

Как открывать и закрывать контейнер accordion

Как вы можете видеть выше, мы отображаем один раздел как часть accordion, но по умолчанию мы не можем закрыть accordion. Итак, давайте добавим функционал для открытия и закрытия accordion. Добавьте новое состояние внутри компонента, как показано ниже:

Здесь мы определили состояние isActive и на его основе скроем или покажем содержимое контейнера. Также импортируйте хук useState в верхней части файла:

Теперь для div с классом accordion-title добавьте обработчик onClick следующим образом:

Здесь мы инвертируем значение состояния isActive, когда нажимаем на div accordion-title. Если значение isActive равно false, мы устанавливаем его на true и наоборот.

Мы также устанавливаем знак + или — в зависимости от значения isActive используя тернарный оператор. И если значение состояния isActive равно true то мы показываем содержимое контейнера, как показано ниже:

Теперь, если вы проверите приложение, вы увидите следующий экран:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Как создать Accordion React с нуля без использования внешней библиотеки

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

Как добавить несколько разделов в контейнер accordion

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

Давайте создадим отдельный компонент, чтобы просто отображать accordion, и в зависимости от количества разделов мы перейдем к компоненту, чтобы отобразить несколько разделов. Создайте новый файл Accordion.js внутри папки src и добавьте в него следующее содержимое:

Здесь мы перемещаем состояние div accordion-item из файла App.js в файл Accordion.js и передаем title и content props, используя синтаксис деструктуризации ES6, например:

Теперь откройте App.js файл и замените его следующим содержимым:

Здесь мы преобразовали accordionData из объекта в массив объектов и мы проходим его, передавая соответствующие title и content компоненту Accordion.

Теперь, если вы запустите приложение, вы увидите, что отображаются три раздела, и мы можем открывать и закрывать каждый раздел, как показано ниже:

Как создать Accordion React с нуля без использования внешней библиотеки

Рефакторинг кода

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

Лучше хранить статические данные в отдельном файле. Давайте переместим массив accordionData в другой файл и импортируем его в файл App.js. Создайте новый файл content.js внутри папки utils и добавьте в него следующее содержимое:

Теперь откройте файл App.js и замените его следующим содержимым:

Здесь мы только что импортировали статические данные из внешнего файла и удалили их из App.js. Итак, теперь код выглядит чистым и легким для понимания, а функционал работает, как и раньше.

Как создать Accordion React с нуля без использования внешней библиотеки

Мы закончили с функционалом приложения. Вы можете найти полный исходный код GitHub для этого приложения в этом репозитории.

Автор: Yogesh Chavan

Источник: yogeshchavan.hashnode.dev

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.