Javascript 使用样式化组件切换特定贴图

嗨，伙计们，我正在使用样式组合渲染一个带有特定地图数据的下拉列表。这是我的密码

const MenuBar = () => {
  const [toggle, setToggle] = useState(false);
  const handleToggle = () => {
    setToggle(!toggle);
  };
  return (
    <MenuContainer>
      {menu.children.map((outerMap, i) => (
        <Dropdown>
          <DropBtn key={i} onClick={handleToggle}>
            <h2>{outerMap.name}</h2>
          </DropBtn>
          <DropdownContent toggle={toggle}>
            {outerMap.name === "Account" &&
              outerMap.firstchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
            {outerMap.name === "Design" &&
              outerMap.secondchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
            {outerMap.name === "Content" &&
              outerMap.thirdchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
            {outerMap.name === "Reporting" &&
              outerMap.fourthchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
          </DropdownContent>
        </Dropdown>
      ))}
    </MenuContainer>
  );
};

export default MenuBar;

但这里的问题是，它会在单击时将每个菜单项的内容都放下来

如何明确地只删除每个特定对象的贴图数据，如内联条件渲染中所示

谢谢

display: ${({ toggle }) => (toggle ? "block" : "none")};