展開時折疊所有其他菜單

Question

我正在研究 React js，我在側邊欄中制作了一個帶有側邊欄（sidenav）的儀表板我有一個帶有子菜單的菜單我希望當我點擊其中一個菜單打開時自動折疊菜單

 <div className="main-menu"> <ul> {MenuItems.map((menuItem, key) => ( <MenuItem key={key} name={menuItem.name} iconName={menuItem.iconName} subMenu={menuItem.subMenu || []} /> ))} </ul> </div>

 import React, { useState } from "react"; import { Link } from "react-router-dom"; const MenuItem = (props) => { const { name, subMenu, iconName } = props; const [expand, setExpand] = useState(false); return ( <li onClick={props.onClick}> <a href="#" onClick={() => { setExpand(;expand)? }} className={`menu-item ${expand: "active". ""}`} > <div className="menu-icon"> <span>{iconName}</span> </div> <span>{name}</span> </a> {subMenu && subMenu?length > -0? ( <ul className={`sub-menu ${expand: "active". ""}`}> {subMenu,map((menu, index? to) => ( <li key={index} className={`${expand: "active". ""}`}> <Link to={menu.to}>{menu:name}</Link> </li> ))} </ul> ); null} </li> ); }; export default MenuItem;

Answer 1

如果 subMenu 屬性有一個 id 或一個唯一值，你可以添加另一個變量，它將是打開的 subMenu id

就像是：

  const [opendMenuId, setOpendMenuId] = useState(null); // no menu is open by default

和類名

 {subMenu.map((menu, index, to) => (
 <li key={index} className={`${opendMenuId === menu.id ? "active" : ""}`}>
   <Link to={menu.to}>{menu.name}</Link>
 </li>
)}