React Admin子菜单点击标题/Chevron展开失效问题求助

问题1：MenuItem的linkDisabled无效，点击文本触发仪表盘跳转 #

原因 #

@react-admin/ra-navigation 的 MenuItem 组件中，linkDisabled 属性无法完全阻止导航行为，当设置 to='' 时会默认跳转到根路径（仪表盘）。

解决方案 #

移除 to 属性，通过 onClick 手动阻止默认行为并触发展开/收起逻辑：

// 替换注释掉的MenuItem代码
<MenuItem
  name={subGroup[0].options.subGroup}
  label={`${subGroup[0].options.subGroup} (${subGroupTools.length})`}
  icon={curIcon}
  onClick={(e) => {
    e.preventDefault(); // 阻止默认导航
    handleClick(); // 执行展开/收起
  }}
> 
  {subGroupTools}
</MenuItem>

无需设置 linkDisabled 和 to=''，因为该菜单项仅作为子菜单容器，不需要导航功能。

问题2：ListItem点击后菜单自动关闭 #

原因 #

父级 Menu 组件（来自 @react-admin/ra-navigation）会在内部元素被点击时自动关闭，ListItem的点击事件会冒泡到父级Menu，触发关闭逻辑。

解决方案 #

在点击事件中阻止事件冒泡，避免父级Menu捕获到点击动作：

// 修改SubMenuItemMapper中的handleClick和ListItem
const handleClick = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  setOpen(prev => !prev);
};

// ...

<ListItem button onClick={handleClick}>
  <ListItemIcon>{curIcon}</ListItemIcon>
  <ListItemText primary={`${subGroup[0].options.subGroup} (${subGroupTools.length})`} />
  {open ? <ExpandLess /> : <ExpandMore />}
</ListItem>

这样点击ListItem的任何区域（文本、图标、箭头）都能触发展开/收起，同时不会导致父级菜单关闭。

优化后的完整SubMenuItemMapper组件 #

const SubMenuItemMapper = (subGroup, groupName) => {
  const [open, setOpen] = useState(false);

  const handleClick = (e) => {
    e.stopPropagation(); // 阻止事件冒泡，避免父级菜单关闭
    setOpen(prev => !prev);
  };
  
  let subGroupTools = [];
  let curIcon = <PillarIcon />;
  
  if (subGroup.length > 0) {
    subGroupTools = subGroup.map(MenuItemMapper(groupName));
    curIcon = createElement(subGroup[0].icon);
  }
  
  return (
    <MultiLevelMenu id="appSubMenu">
       <ListItem button onClick={handleClick}>
        <ListItemIcon>{curIcon}</ListItemIcon>
        <ListItemText primary={`${subGroup[0].options.subGroup} (${subGroupTools.length})`} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {subGroupTools}
        </List>
      </Collapse>
    </MultiLevelMenu>
  );
};

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