React Ant Design 前台导航菜单组件

/**

• Created by xun on 2021/5/7 14:42.
• description: menu 前台导航菜单 */ import { Menu, Affix, Layout } from 'antd'; import * as routes from 'constants/routes/home'; import React, { useState } from 'react'; import { extractMenuPathKey, renderMenuItem, renderSubMenuWithItem } from 'utils/menu'; import { getMenuSelectedKey } from 'utils/router'; import { Link } from 'react-router-dom'; import UserInfo from './UserInfo'; import { menuStore } from 'stores'; import { ICON_MENU_ASSETS, ICON_MENU_SELECTED_ASSETS, ICON_MENU_COMPANY, ICON_MENU_SELECTED_COMPANY, ICON_MENU_CONTARCT, ICON_MENU_SELECTED_CONTRACT, ICON_MENU_DASHBOARD, ICON_MENU_SELECTED_DASHBOARD } from 'constants/icon';

const getMenuKey = extractMenuPathKey; const { Sider } = Layout; export const pathIndex = extractMenuPathKey(window.location.pathname, 1);

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: [ { text: '待上传资产', path: '/home/assets/waitUpload/list', key: getMenuKey('/home/assets/waitUpload/list', 2) }, { text: '已上传资产', path: '/home/assets/upload/list', key: getMenuKey('/home/assets/upload/list', 2) }, { text: '已投放资产', path: '/home/assets/delivery/list', key: getMenuKey('/home/assets/delivery/list', 2) } ] }, { icon: ICON_MENU_CONTARCT, selectedIcon: ICON_MENU_SELECTED_CONTRACT, text: '合同管理', key: getMenuKey('/home/contracts', 1), children: [ { text: '待签署合同', path: '/home/contracts/waitSign/list', key: getMenuKey('/home/contracts/waitSign/list', 2) }, { text: '已签署合同', path: '/home/contracts/signed/list', key: getMenuKey('/home/contracts/signed/list', 2) }, { text: '已归档合同', path: '/home/contracts/archived/list', key: getMenuKey('/home/contracts/archived/list', 2) } ] }, { icon: ICON_MENU_COMPANY, selectedIcon: ICON_MENU_SELECTED_COMPANY, text: '公司管理', key: getMenuKey('/home/admin', 1), children: [ { text: '基本信息', path: '/home/admin/basicInfo/list', key: getMenuKey('/home/admin/basicInfo/list', 2) }, { text: '电子签章', path: '/home/admin/ecoSignature/list', key: getMenuKey('/home/admin/ecoSignature/list', 2) }, { text: '员工管理', path: '/home/admin/employeeManage/list', key: getMenuKey('/home/admin/employeeManage/list', 2) } ] } ];

// //前台顶部导航菜单 export const HomeSider = () => { const defaultSelectedKey = getMenuSelectedKey( window.location.pathname, getMenuKey('/home/dashboard', 1), 1 ), openKey = getMenuSelectedKey(window.location.pathname, getMenuKey('/home/dashboard'), 2); // const handleTabClick = (tab) => { // menuStore.addTab(tab); // };

	//   const handleTabClose = (tab) => {
	// 	menuStore.removeTab(tab.key);
	//   };
	console.log(openKey, 'ooo');
return (
	<>
	<UserInfo />
	<Menu
		theme={'light'}
		mode={'inline'}
		selectedKeys={[defaultSelectedKey]}
		defaultOpenKeys={[openKey]}
		// onClick={handleTabClick}
		className={'home-horizontal-menu'}
	>
		{HOME_LEFT_MENU_OPTS.map((obj) => {
			const options = {
				antdIcon: true,
				showIcon: true,
				showSubIcon: true,
				subAntdIcon: true
			};
			return obj.children
				? renderSubMenuWithItem(obj, options)
				: <Menu.Item key={obj.key}>
						<Link to={obj.path}>
							<div>
								<span><img src={obj.icon} style={{ marginRight: 10, fontSize: '0.18rem' }} /> {obj.text}</span>
							</div>
						</Link>
				</Menu.Item>
			
		})} 
	</Menu>
	</>
);

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

修改菜单项的渲染函数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属性来显示选中状态的图标。