React Ant Design 二级菜单选中图标动态改变

要在 Ant Design 的二级菜单选中后改变菜单图标，可以使用 Ant Design 提供的 Menu 组件的 onSelect 回调函数来实现。具体步骤如下：

首先，导入 Menu 组件和相关样式：

import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';

创建一个状态变量来存储当前选中的菜单项的 key：

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

在 Menu 组件中使用 onSelect 回调函数来更新选中的菜单项的 key：

<Menu
   mode="horizontal"
   selectedKeys={[selectedKey]}
   onSelect={(e) => setSelectedKey(e.key)}
>
   <Menu.Item key="mail" icon={<MailOutlined />}>
      Navigation One
   </Menu.Item>
   <Menu.Item key="app" icon={<AppstoreOutlined />}>
      Navigation Two
   </Menu.Item>
   <Menu.Item key="setting" icon={<SettingOutlined />}>
      Navigation Three
   </Menu.Item>
</Menu>

在需要改变图标的菜单项上添加条件判断，根据选中状态来动态改变图标：

<Menu.Item
   key="mail"
   icon={selectedKey === 'mail' ? <MailOutlined /> : <MailOutlined />}
>
   Navigation One
</Menu.Item>

通过这种方式，当某个菜单项被选中时，其图标将会改变。你可以根据你自己的需求选择不同的图标和样式。