Ant Design Menu 菜单点击后为啥不高亮？

长孙新霞提问于 2026-03-28 07:47:20 阅读 4

组件

我用 Ant Design 的 Menu 组件做侧边栏，点击菜单项后页面能跳转，但选中的项没有高亮显示。明明设置了 selectedKeys，可就是没效果，是我哪里写错了吗？

我的代码大概是这样：

const [selectedKey, setSelectedKey] = useState(['/home']);

<Menu
  mode="inline"
  selectedKeys={selectedKey}
  onClick={({ key }) => {
    setSelectedKey([key]);
    navigate(key);
  }}
>
  <Menu.Item key="/home">首页</Menu.Item>
  <Menu.Item key="/user">用户管理</Menu.Item>
</Menu>

控制台也没报错，但点完“用户管理”后，高亮还是停留在“首页”，这到底是啥情况？

Menu菜单 Table组件 UI组件

我来解答赞 5 收藏

反馈

1 条解答

子皓（打工版） Lv1

检查一下 selectedKey 的初始值，你用的是数组形式，但组件渲染时可能没及时更新。试试把 useState 改成 useState('/home')，然后在 onClick 里也只传字符串：setSelectedKey(key)。这样应该能正常高亮了。

const [selectedKey, setSelectedKey] = useState('/home');



<Menu

  mode="inline"

  selectedKeys={[selectedKey]}

  onClick={({ key }) => {

    setSelectedKey(key);

    navigate(key);

  }}

>

  <Menu.Item key="/home">首页</Menu.Item>

  <Menu.Item key="/user">用户管理</Menu.Item>

</Menu>

这问题折腾人，但我以前也踩过坑。搞定收工。

2026-03-28 08:01