Ant Design Menu 二级导航选中样式丢失解决方案

要解决 Ant Design Menu 选中二级导航后没有 'ant-menu-item-selected' 样式的问题，可以按照以下步骤进行操作：

1. 确保你的二级导航对应的菜单项设置了正确的 'key' 属性。'key' 属性是 Ant Design Menu 组件用来标识菜单项的唯一属性。例如：

<Menu mode='horizontal' selectedKeys={[current]}>
  <Menu.Item key='home'>Home</Menu.Item>
  <SubMenu key='subMenu' title='SubMenu'>
    <Menu.Item key='subMenu1'>SubMenu 1</Menu.Item>
    <Menu.Item key='subMenu2'>SubMenu 2</Menu.Item>
  </SubMenu>
</Menu>

2. 确保你的二级导航所在的组件中设置了正确的 'current' 状态值。当前选中的菜单项的 'key' 值应该与 'current' 状态值相匹配。例如：

import React, { useState } from 'react';
import { Menu } from 'antd';

const MyMenu = () => {
  const [current, setCurrent] = useState('home');

  const handleClick = (e) => {
    setCurrent(e.key);
  };

  return (
    <Menu mode='horizontal' selectedKeys={[current]} onClick={handleClick}>
      <Menu.Item key='home'>Home</Menu.Item>
      <SubMenu key='subMenu' title='SubMenu'>
        <Menu.Item key='subMenu1'>SubMenu 1</Menu.Item>
        <Menu.Item key='subMenu2'>SubMenu 2</Menu.Item>
      </SubMenu>
    </Menu>
  );
};

 export default MyMenu;

通过以上步骤，你应该能够解决 Ant Design Menu 选中二级导航后没有 'ant-menu-item-selected' 样式的问题。确保 'key' 属性和 'current' 状态值正确设置，就可以在选中二级导航时正确显示选中样式。