以下是基于Ant Design
Pro的动态
菜单生成的完整方法附代码，可以实现
左侧多级
菜单：
```javascript
import
React from '
react';import { Menu, Icon } from '
antd';
import { Link } from 'dva/router';
import { getMenuData } from '../common/menu';
const { SubMenu } = Menu;
export default class SiderMenu extends
React.Component {
constructor(
props) {
super(
props);
this.menus = getMenuData();
this.state = {
openKeys: this.getDefaultCollapsedSubMenus(
props),
};
}
componentWillReceive
Props(next
Props) {
const {
pathname } = next
Props.location;
if (this.
props.location.
pathname !==
pathname) {
this.setState({
openKeys: this.getDefaultCollapsedSubMenus(next
Props), });
}
}
/**
* Convert
pathname to openKeys
* /list/search/articles = > ['list','/list/search']
* @param
props
*/
getDefaultCollapsedSubMenus(
props) {
const { location: {
pathname } } =
props || this.
props;
// eg. /list/search/articles = > ['','list','search','articles']
const snippets =
pathname.split('/').slice(1, -1);
const current
PathSnippets = snippets.map((item, index) => {
const arr = snippets.slice(0, index + 1);
return `/${arr.join('/')}`;
});
let currentMenuSelectedKeys = [];
current
PathSnippets.forEach((item) => {
currentMenuSelectedKeys = currentMenuSelectedKeys.concat(this.getSelectedMenuKeys(item));
});
if (currentMenuSelectedKeys.length === 0) {
return ['dashboard'];
}
return currentMenuSelectedKeys;
}
getFlatMenuKeys(menus) {
let keys = [];
menus.forEach((item) => {
if (item.children) {
keys = keys.concat(this.getFlatMenuKeys(item.children));
}
keys.push(item.
path);
});
return keys;
}
getSelectedMenuKeys = (
path) => {
const flatMenuKeys = this.getFlatMenuKeys(this.menus);
const key = flatMenuKeys.filter(item => (item &&
path.indexOf(item) === 0));
return key;
}
isMainMenu = (key) => {
const { menus } = this;
return menus.some(item => key && (item.key === key || item.
path === key));
}
handleOpenChange = (openKeys) => {
const lastOpenKey = openKeys[openKeys.length - 1];
const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
this.setState({
openKeys: moreThanOne ? [lastOpenKey] : [...openKeys],
});
}
render() {
const { logo, collapsed, onCollapse } = this.
props;
const { openKeys } = this.state;
// Don't show popup menu when it is been collapsed
const menu
Props = collapsed ? {} : {
openKeys,
};
// if
pathname can't match, use the nearest parent's key
let selectedKeys = this.getSelectedMenuKeys(this.
props.location.
pathname);
if (!selectedKeys.length) {
selectedKeys = [openKeys[openKeys.length - 1]];
}
return (
<div>
<div className="logo" id="logo">
<Link to="/">
<img src={logo} alt="logo" />
<h1>Ant Design
Pro</h1>
</Link>
</div>
<Menu
key="Menu"
theme="dark"
mode="inline"
{...menu
Props}
onOpenChange={this.handleOpenChange}
selectedKeys={selectedKeys}
style={{ padding: '16px 0', width: '100%' }}
>
{this.menus
.filter(item => !item.hideInMenu)
.map((item) => {
if (item.children && item.children.some(child => !child.hideInMenu)) {
return (
<SubMenu
key={item.key}
title={<span><Icon type={item.icon} /><span>{item.name}</span></span>}
>
{item.children.map(child => child.hideInMenu ? null : (
<Menu.Item key={child.key}>
<Link to={child.
path}>
<span>{child.name}</span>
</Link>
</Menu.Item>
))}
</SubMenu>
);
}
return (
<Menu.Item key={item.key}>
<Link to={item.
path}>
<Icon type={item.icon} />
<span>{item.name}</span>
</Link>
</Menu.Item>
);
})}
</Menu>
</div>
);
}
}
```
本文详细介绍了如何在React应用中使用Ant Design库创建左侧菜单，并在页面刷新后保持菜单选中状态。通过利用React的状态管理和Antd的Menu组件特性，实现动态设置菜单高亮。
最低0.47元/天 解锁文章
扫一扫
3729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
