Реагировать Js, TypeScript, привязать теги к выпадающему меню

Question

По сути, у меня есть массив, в котором у меня есть вся информация о значке iconi c и ссылках, которые я буду отображать на боковой панели, но я не уверен, как создать состояние для сопоставления, и разрешил только одному элементу из этого меню быть активным одновременно

следующим образом:

И так как у меня будет два типа меню, то есть когда оно закрыто и когда оно открыто, я не могу решить это

мои теги:

export const SideBarTags = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: faFileAlt,
    dropdownItems: null,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: faNewspaper,
    dropdownItems: null,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: faMeteor,
    dropdownItems: [
      { name: 'Elo Boost', link: '/eloBost' },
      { name: 'Duo Boost', link: '/duoBoost' },
      { name: 'MD10', link: '/eloBost' },
      { name: 'Coaching', link: '/duoBoost' },
      { name: 'Vitóriais', link: '/duoBoost' },
    ],
  },
  {
    name: 'Carteira',
    link: '../cartcredit',
    icon: faWallet,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

мой tsx:

interface OpenedMenuTags{
  isOpen: boolean
}
const OpenedMenuTags: React.FC<OpenedMenuTags> = () {

  return(

  )
}

const Menu: React.FC<Hamburguer> = ({ isOpen }) => {
  const renderTags = () => {
    if(isOpen){
      return (
        <OpenedMenuTags isOpen={isOpen}/>
      )
    }else if(isOpen === false){
      return(
      <>
      Nothing Yet
      </>)
    }
  }
  return (
    <DashMenu open={isOpen}>
      <div className="show-hide">
        <span>
          <FontAwesomeIcon
            className="iconmenu"
            icon={faTachometerAlt}
            size="1x"
            fixedWidth
            color="white"
          />
          DashBoard
        </span>
      </div>
      <MenuList open={isOpen}>
        {isOpen?}
      </MenuList>
    </DashMenu>
  );
};

Answer 1

[Edit2] Я единственный, кто может получить доступ к stackblitz или как? Хаха, вот код:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  const clicked = e => {
    const dropdowns = document.getElementsByClassName('dropdown');
    Array.from(dropdowns).forEach(el => el.classList.remove('active'));
    e.target.parentNode.classList.add('active');
  };

  return (
    <div>
      <div className="dropdown">
        <div onClick={event => clicked(event)}>Item 1</div>

        <div>SubItem 1</div>
        <div>SubItem 2</div>
      </div>
      <div className="dropdown">
      <div onClick={event => clicked(event)}>Item 2</div>
        <div>SubItem 3</div>
        <div>SubItem 4</div>
      </div>
      <div className="dropdown">
      <div onClick={event => clicked(event)}>Item 3</div>
        <div>SubItem 5</div>
        <div>SubItem 6</div>
      </div>
    </div>
  );
};

render(<App />, document.getElementById("root"));

А вот маленький css:

.dropdown {
  height: 20px;
  overflow: hidden;
}

.active{
  height: auto;
}

Как это работает, довольно легко. По умолчанию размер меню отображается только для заголовка. Нажав на один из них, вы отключите класс «активный» на каждом элементе, который имеет класс «выпадающий», а затем добавите «активный» к тому, на который вы нажали.

---

[Редактировать] Подходит ли это нестандартное решение для ваших нужд? Демонстрационные выпадающие списки

---

Не могли бы вы просто использовать что-то подобное? Компонент Sidenav

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