下拉菜單如何在單擊時隱藏元素並僅顯示一個？

Question

我有一個問題如何在我的下拉菜單中操作狀態？ 我的意思是，現在當我單擊一個元素（例如“Mezczyzna” - ItemsMenu - MenuItem）時，我的項目會顯示，而當我單擊另一個項目（例如“Kobieta”-ItemsMenu - MenuItem（Kobieta 是標題））時，該項目也會顯示起來，“Mezczyzna”仍然打開，但我想隱藏“Mezczyzna”。 例如，我不知道如何為具有特定索引的元素設置狀態。 現在我有父文件 - Navigationn 呈現（映射）ItemsMenu 狀態。 如何將State [2] 元素設置為 false？ 謝謝您的幫助 ：）

const Navigationn = ({displayHandlerMenu}) =>{
return (
<>
  <SidebarWrap>
    {menuItems.map((item, index) => (
      <ItemsMenu key={index} item={item} displayHandlerMenu={displayHandlerMenu} />
    ))}
  </SidebarWrap>
</>);};
export default Navigationn;



const ItemsMenu = ({ item, displayHandlerMenu, index }) =>{
const [submenu, setSubmenu] = useState(false);
const showSubmenu = () => {
setSubmenu(!submenu);};
return (
<>
  <MenuItemLink to={item.path} onClick={showSubmenu} key={index}>
    <MenuItem>{item.title}</MenuItem>
  </MenuItemLink>
  {item.submenu &&
    submenu &&
    item.submenu.map((subItem, index) => (
      <>
        <ItemsSubMenu
          key={index}
          item={subItem}
          displayHandlerMenu={displayHandlerMenu}
        />
      </>
    ))}
</>
);};
export default ItemsMenu;

Answer 1

實現此目的的一個簡單方法是將當前選擇的項目 id（最好是唯一屬性，這里為了簡單起見我選擇標題）作為狀態存儲在父組件（Navigationn）中，並將此狀態作為道具傳遞（使用上下文也是一個選項）給孩子們。

每個子組件（ItemsMenu）僅在當前項目標題是他的標題時才顯示他的子項目，並在單擊時將當前項目標題設置為他的標題（如果它已經是他的標題 - 將其更改為空，因此不會顯示任何項目） .

const Navigationn = ({ displayHandlerMenu }) => {
  const [currentShownItemId, setCurrentShownItemId] = useState();

  return (
    <>
      <SidebarWrap>
        {menuItems.map((item, index) => (
          <ItemsMenu key={index} item={item} displayHandlerMenu={displayHandlerMenu} 
            currentShownItemId={currentShownItemId} setCurrentShownItemId={setCurrentShownItemId}/>
        ))}
      </SidebarWrap>
    </>);
};

const ItemsMenu = ({ item, displayHandlerMenu, index, currentShownItemId, setCurrentShownItemId }) => {
  const showSubmenu = () => {
    setCurrentShownItemId(currentShownItemId === item.title ? null : item.title);
  };
  return (
    <>
      <MenuItemLink to={item.path} onClick={showSubmenu} key={index}>
        <MenuItem>{item.title}</MenuItem>
      </MenuItemLink>
      {item.submenu &&
        currentShownItemId === item.title &&
        item.submenu.map((subItem, index) => (
          <>
            <ItemsSubMenu
              key={index}
              item={subItem}
              displayHandlerMenu={displayHandlerMenu}
            />
          </>
        ))}
    </>
  );
};