Created by xun on 202157 1442 description menu 前台导航菜单 import MenuAffixLayout from antd;import as routes from constantsrouteshome;import React useState from react;import extractMenuPathKey rend

要实现选中菜单后图标改变的效果，可以在菜单项的渲染函数中判断当前菜单项是否被选中，如果被选中则使用选中状态的图标，否则使用默认图标。

修改菜单项的渲染函数renderMenuItem，添加判断逻辑：

const renderMenuItem = (item, options) => {
  const selected = defaultSelectedKey === item.key;
  const icon = selected ? item.selectedIcon : item.icon;
  
  return (
    <Menu.Item key={item.key}>
      <Link to={item.path}>
        <div>
          <span><img src={icon} style={{marginRight: 10, fontSize: '0.18rem'}}/> {item.text}</span>
        </div>
      </Link>
    </Menu.Item>
  );
};

在菜单项对象中添加selectedIcon属性，用于存储选中状态下的图标：

export const HOME_LEFT_MENU_OPTS = [
  {
    icon: ICON_MENU_DASHBOARD,
    selectedIcon: ICON_MENU_SELECTED_DASHBOARD,
    text: '首页',
    key: getMenuKey('/home/dashboard', 1),
    path: '/home/dashboard'
  },
  {
    icon: ICON_MENU_ASSETS,
    selectedIcon: ICON_MENU_SELECTED_ASSETS,
    text: '资产管理',
    key: getMenuKey('/home/assets', 1),
    children: [
      // ...
    ]
  },
  {
    icon: ICON_MENU_CONTARCT,
    selectedIcon: ICON_MENU_SELECTED_CONTRACT,
    text: '合同管理',
    key: getMenuKey('/home/contracts', 1),
    children: [
      // ...
    ]
  },
  {
    icon: ICON_MENU_COMPANY,
    selectedIcon: ICON_MENU_SELECTED_COMPANY,
    text: '公司管理',
    key: getMenuKey('/home/admin', 1),
    children: [
      // ...
    ]
  }
];

这样，在选中菜单项时，会根据菜单项的selectedIcon属性来显示选中状态的图标。