Меню Accordion в React с нуля
В современном веб-дизайне взаимодействие с пользователем имеет первостепенное значение. Компоненты-аккордеоны, представляющие собой аккуратные раскрывающиеся и сворачивающиеся секции, широко используются для оптимизации пространства и улучшения пользовательского опыта. В этом руководстве мы расскажем вам о том, как создать реагирующий компонент аккордеона на React. Мы разберем код шаг за шагом, объясняя логику, лежащую в основе каждой секции. Давайте погрузимся в работу!
Итак, давайте приступим.
Первичная настройка проекта
Создайте новый проект с помощью create-react-app.
npx create-react-app your-component-appСоздание основы: Импортные компоненты
Для начала импортируем необходимые модули и компоненты. Мы импортируем компонент Accordion из отдельного файла и локальную таблицу стилей (styles.css). Кроме того, мы импортируем React и его мощный хук useState, являющийся основой функциональных компонентов React.
import Accordion from "./Accordion";
import "./styles.css";
import React, { useState } from "react";Определение структуры данных
Аккордеоны часто отображают динамическое содержимое. В нашем примере мы определяем массив объектов с именем AccordionMenu. Каждый объект представляет собой элемент аккордеона со свойствами index, title и content. Эти данные будут динамически отображаться нашими компонентами React.
const AccordionMenu = [
{
index: 0,
title: "Content 1",
content: `Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque. Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque.`
},
{
index: 1,
title: "Content 2",
content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
dolor ut sequi minus iste? Quas?`
},
{
index: 3,
title: "Content 3",
content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
quaerat iure quos dolorum accusantium ducimus in illum vero commodi
pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
quidem maiores doloremque est numquam praesentium eos voluptatem amet!
Repudiandae, mollitia id reprehenderit a ab odit!`
}
];Построение функционального компонента: Приложение
Ядром нашего приложения является функциональный компонент App. Здесь мы используем хук React useState для управления активным индексом аккордеона. Функция handleAccordionClick переключает активный индекс, гарантируя, что в каждый момент времени открыт только один элемент аккордеона. Этот компонент работает с массивом AccordionMenu, отображая отдельные компоненты аккордеона с соответствующими реквизитами.
export default function App() {
const [activeIndex, setActiveIndex] = useState(-1);
const handleAccordionClick = (index) => {
setActiveIndex(index === activeIndex ? -1 : index);
};
return (
<div className="App">
<h1>Accordion</h1>
<div className="accordion">
{AccordionMenu.map((item, index) => (
<Accordion
key={index}
title={item.title}
content={item.content}
index={index}
activeIndex={activeIndex}
onAccordionClick={handleAccordionClick}
/>
))}
</div>
</div>
);
}Конструирование компонента "Аккордеон"
Компонент "Аккордеон" - это то место, где происходит волшебство. Он получает различные реквизиты, такие как title, content, index, activeIndex и onAccordionClick. На основе этих реквизитов он определяет, должен ли текущий элемент аккордеона быть активным или нет. Когда пользователь щелкает на заголовок аккордеона, срабатывает функция onAccordionClick, обновляющая активный индекс и соответствующим образом перерисовывающая компонент.
const Accordion = ({ title, content, index, activeIndex, onAccordionClick }) => {
const isActive = index === activeIndex;
return (
<div className="accordion-item" key={title}>
<div className="accordion-title" onClick={() => onAccordionClick(index)}>
<div>{title}</div>
<div>{isActive ? "-" : "+"}</div>
</div>
{isActive && <div className="accordion-content">{content}</div>}
</div>
);
};Полировка с помощью CSS
Чтобы сделать наши аккордеоны визуально привлекательными и реагирующими на изменения, мы применяем стили CSS. Определенные стили задаются для всего корпуса аккордеона, отдельных элементов аккордеона, заголовков и содержимого. Медиазапросы обеспечивают изящную адаптацию аккордеонов к различным размерам экрана, что позволяет создать удобство работы с ними.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
background: rgb(94, 89, 91);
background: radial-gradient(
circle,
rgb(255, 247, 250) 0%,
rgb(174, 179, 180) 100%
);
}
h1 {
text-align: center;
margin: 2rem 0 4rem 0;
}
.accordion {
max-width: 600px;
margin: 2rem auto;
}
.accordion-item {
margin-bottom: 12px;
}
.accordion-title {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
background-color: #21aeca;
}
.accordion-title:hover {
background-color: #12759c;
}
.accordion-title,
.accordion-content {
padding: 1rem;
}
.accordion-content {
background-color: #39b9d275;
}
@media screen and (max-width: 700px) {
body {
font-size: 18px;
}
.accordion {
width: 90%;
}
}Заключение
В заключение следует отметить, что создание реагирующего компонента аккордеона в React предполагает тщательное управление состоянием и реквизитами. Организовав код в виде модульных компонентов и применив CSS-стили для придания ему законченного вида, мы можем создать удобный интерфейс аккордеона. Понимание взаимодействия между компонентами React и их состояниями имеет решающее значение для разработки интерактивных веб-приложений. Следуя этому пошаговому руководству, разработчики смогут создавать подобные компоненты, совершенствуя свои навыки в разработке React и дизайне пользовательских интерфейсов. Удачного кодирования!
