React条件渲染JSX：如何实现侧边栏仅点击子菜单项关闭、父菜单点击不关闭

你的代码逻辑存在两个核心问题：

1. JS 中数组的布尔值恒为true，你用item.subNav.map(...)作为判断条件，只要菜单存在subNav字段，判断结果就为真，所以所有带子导航的父菜单都会被错误包裹ButtonHook组件。
2. 你将触发侧边栏关闭的ButtonHook绑定在了父级菜单外层，和需求完全相反，你需要将ButtonHook绑定到子菜单项上。

第一步：修改 sidebar.js 逻辑 #

删除原有的条件包裹逻辑，所有一级父菜单直接渲染SubMenu即可，不要外层包裹ButtonHook：

{SidebarData.map((item, index) => {
  return (
    <span item={item} key={index}>
      <SubMenu item={item} key={index} />
    </span>
  )
})}

第二步：修改 submenu.js 逻辑 #

将ButtonHook包裹在子导航的DropdownLink外层，仅子菜单项点击时触发关闭侧边栏逻辑：

const SubMenu = ({ item }) => {
  const [subnav, setSubnav] = useState(false);
  const showSubnav = () => setSubnav(!subnav);

  return (
    <>
      <SidebarLink to={item.path} onClick={item.subNav && showSubnav}>
        <div>
          {item.icon}
          <SidebarLabel>{item.title}</SidebarLabel>
        </div>
        <div>
          {item.subNav && subnav
            ? item.iconOpened
            : item.subNav
            ? item.iconClosed
            : null}
        </div>
      </SidebarLink>
      {subnav &&
        item.subNav.map((subItem, index) => {
          return (
            <ButtonHook key={index}>
              <DropdownLink to={subItem.path}>
                {subItem.icon}
                <SidebarLabel>{subItem.title}</SidebarLabel>
              </DropdownLink>
            </ButtonHook>
          );
        })}
    </>
  );
};

效果验证 #

修改后：

• 点击 Overview、Finances of the state、Budget 所有一级父菜单时，只会触发路由跳转/子菜单展开逻辑，不会触发侧边栏关闭
• 点击 Introduction、Major Sources 等子菜单项时，才会触发ButtonHook绑定的关闭侧边栏逻辑，完全匹配需求。

内容的提问来源于stack exchange，提问作者Anil Dharni