一、获取到 HTMLCollection
const domlist = document.querySelector(".header-left-Menu-style").children;
这里的 domList 就是 HTMLCollection 对象,是个类数组,不能使用map等方法;最后使用 for 循环完成的遍历;如下所示
二、场景
自己编写后台管理页面,左 上下layout 结构,使用zent组件库。
左侧路由使用 Menu 组件功能不全,只提供了一个初始默认选项,这就导致了一个问题:
一、左侧单独切换路由时,没问题;
二、问题在于——从其他页面换路由时,因为不是受控组件、左侧Menu根本不会切换。
三、好容易获取到了对应的标签数组列表,反正不能使用map等方法遍历,通过查资料发现原来获取的是个类数组HTMLCollection。
Zent-Menu:https://zent-contrib.gitee.io/zent/zh/component/menu
参数 | 说明 | 类型 |
---|---|---|
onClick | 点击菜单节点回调 | func |
onSubMenuClick | 点击子菜单(非叶子节点)的回调, 入参为子菜单 ID | func |
onExpandChange | 菜单展开/折叠时的回调, 入参为此时处于展开状态的 | func |
SubMenu | id 数组 | func |
style | 自定义内联样式 | object |
mode | 模式 | string |
defaultExpandKeys | 默认展开的SubMenu的keys | array |
defaultSelectedKey | 默认选中的MenuItem的key | string |
className | 节点类名 | string |
三、解决办法
思路:页面路由切换,只需要监听一下路由的变化,从而判断当前路由对应左侧Menu的哪个子元素,给对应的子元素做一个点击事件即可。
useEffect(()=>{
// 监听路由的变化 location.pathname
// 通过遍历【路由列表routerList】获取到 location.pathname(key) 对应的路由名称
// 通过获取 Menu 标签子元素(li)的内容--即routerList[item].innerHTML
// 遍历 MenuNameList, 找到指定的li子元素,添加点击事件;
const domList = document.querySelector(".header-left-Menu-style").children;
const locationPathname = location.pathname;
let activeMenuName = '';
for(let i = 0;i < routerList.length;i ++){
if(routerList[i].path === locationPathname){
activeMenuName = routerList[i].MenuName
}
}
for(let i = 0;i< domList.length;i ++){
if(domList[i].innerHTML === activeMenuName){
domList[i].click()
}
}
},[location.pathname])