在React中使用antd的Menu菜单 刷新后自动检索选中的菜单

代码

import React from ‘react’;
import Link from ‘@coms/Link’;
import { Menu } from ‘antd’;
import ‘./index.less’;
import { withRouter } from ‘react-router-dom’;
const { SubMenu } = Menu;
class sideBar extends React.Component {

constructor(props) {
    super(props);
    this.option = this.getPropsKey(props);
}

componentWillReceiveProps(nextProps) {
    if (nextProps.location && nextProps.location.pathname !==    this.props.location.pathname) {
        this.option = this.getPropsKey(nextProps)
    }
}

renderMenu = () => {
    return this.props.menuList.map((item, index) => {
        if (item.sub) {
            const subItem = item.sub.map((sub, i) => {
                return (
                    <Menu.Item key={`subitem${index}${i}`}>
                        <Link to={sub.path || ''} external={sub.external} newTab={sub.newTab} >{sub.value}</Link>
                    </Menu.Item>
                );
            });
            return (
                <SubMenu
                    key={`sub${index}`}
                    disabled={!!item.disabled}
                    title={<span><span>{item.value}</span></span>}
                >
                    {subItem}
                </SubMenu>
            );
        } else {
            return (
                <Menu.Item key={`sub${index}`} >
                    <Link to={item.path || ''} external={item.external} newTab=            {item.newTab} >{item.value}</Link>
                </Menu.Item>
            );
        }
    })
}

getPropsKey = (props) => {
    const { location, menuList } = props;
    console.log(props);
    let key, index;
    menuList.forEach((item, $i) => {
        if (item.sub && item.sub.length) {
            item.sub.forEach((sub, $$i) => {
                if (pathname === sub.path || pathname.includes(sub.path)) {
                    key = $i;
                    index = $$i
                }
            });
        } else if (pathname == item.path || pathname.includes(item.path)) {
            key = $i
        }
    });
    let defaultOpenKeys, defaultSelectKeys;
    if (key !== undefined) {
        defaultOpenKeys = `sub${key}`;
    }
    if (index !== undefined) {
        defaultSelectKeys = `subitem${key}${index}`;
    }
    return {
        defaultOpenKeys: defaultOpenKeys || '',
        defaultSelectKeys: defaultSelectKeys || ''
    }
}
render() {
    const { defaultSelectKeys, defaultOpenKeys } = this.option;
    const defaultSelect = {};
    if (defaultSelectKeys) {
        defaultSelect.defaultOpenKeys = [defaultOpenKeys];
        defaultSelect.defaultSelectKeys = [defaultSelectKeys];
        defaultSelect.selectable = [defaultOpenKeys];
        defaultSelect.selectedKeys = [defaultSelectKeys];
    } else {
        defaultSelect.defaultSelectKeys = [defaultOpenKeys];
        defaultSelect.selectedKeys = [defaultOpenKeys];

    }

    return (
        <div>

            <React.Fragment>
                <Menu
                    {...defaultSelect}
                    mode='inline'
                    theme='dark'
                >
                    {this.renderMenu()}
                </Menu>
            </React.Fragment>
        </div>
    );
}

}
export default withRouter(sideBar);

menuList数据格式：

export const menuList = [

{ value: '首页', id: 'page_login', path: '/home' },
{ value: '测试', id: 'page_go', sub: [
        { value: '测试GO', id: 'page_go_ceshi', path: '/ceshi1' },
    ]
}

]

Link代码

应用

import SideBar from ‘@coms/sidebar/index’;