antd menu一级/父级菜单高亮

接上一个无限级菜单后，有了新的交互要求，每一级菜单都会调取接口获取数据，那么就需要给用户高亮点选的是哪一级菜单层级，那么问题来了，antd的一级/父级及可展开关闭的高亮并没有对应的直接api，点选子级菜单也存在重复高亮样式，见图

所以需要想个办法，判断是父级菜单的时候高亮，且不会跟子级菜单的高亮起冲突，并且不会跟没有自己的一级菜单的ant-menu-item-selected设置的背景值互相覆盖，或许有更好的办法，但是项目着急，所以想了很久，用了很久之前的js选项卡互斥的思路，上代码

let that =this
let domList = []
//这一步是因为用了antd modal，modal未打开时候获取不到节点，会报错，可写可不写
if(document.getElementById('Menu')){
    //菜单栏dom结构体
    let menuDOM = document.getElementById('Menu')
    //可展开菜单dom结构合集，可展开的一级/父级菜单在antd里是div
    let menuDiv = menuDOM.getElementsByTagName('div')
    //不可展开菜单dom结构合集
    let menuLi = menuDOM.getElementsByTagName('li')
    for(let i=0;i<menuDiv.length;i++){
        //筛选不是菜单级div
        if(menuDiv[i].role == 'menuitem'){
            domList.push(menuDiv[i])
        }
    }
    //筛选不是菜单级li
    for(let i=0;i<menuLi.length;i++){
        if(menuLi[i].role == 'menuitem'){
            domList.push(menuLi[i])
        }
    }
    for(let i=0;i<domList.length;i++){
        //每次调用此函数的时候需要将所有菜单级的高亮背景清除掉
        domList[i].style.background='transparent'
        //增加一个下角标
        domList[i].setAttribute('index',i)
        //监听被点击的是哪个下角标
        domList[i].onclick = function(){
            that.setState({
                 //此处+号隐式转换为数字
                 clickIndex:+this.getAttribute('index')
            })
        }
    }
    //首次渲染第一个一级菜单高亮
     if(that.state.clickIndex !== ''){
         domList[that.state.clickIndex].style.background='#3790ff'
     }else{
         domList[0].style.background='#3790ff'
     }
}

 将这个函数加入到onTitleClick函数里，这样每次都会被调用，先清除所有高亮，再加高亮，就不会出现多个层级都高亮的bug，不多说，上效果图

 此处有个小问题，就是ant-menu-item-selected被设置成透明背景，但是会有一个蓝色的3px的右边框，需要将其改为透明

 .ant-menu-item-selected{
    background:transparent;
}
.ant-menu-inline .ant-menu-item:after, .ant-menu-vertical-left .ant-menu-item:after, .ant-menu-vertical-right .ant-menu-item:after, .ant-menu-vertical .ant-menu-item:after{
    border: none !important;
}