自制Breadcrumb 面包屑

使用场景:

• 当系统拥有超过两级以上的层级结构时
• 当需要告知用户『你在哪里』时
• 当需要向上导航的功能时
  

//定义MenuItem
export interface MenuItem{
	key:string // 英文名
	label:string //对应中文名
	children : MenuItem[]   // 一级子菜单
	parentNodeList : MenuItem[] // 所有上级菜单=breadCrumbList 
	...
}

function findParentNodeList(key, menuData, parentNodeList = []) {
  for (const item of menuData) {
    if (item.key=== key) {
      return [...parentNodeList , item ]; // 找到目标菜单，返回所有上级菜单
    }
    if (item.children) {
      const result = findParentNodeList(key, item.children, [...parentNodeList , item]); // 1 
      if (result.length > parentNodeList.length) {
        return result; // 已找到目标菜单，直接返回结果
      }
    }
  }

  return parentNodeList ; // 未找到目标菜单，返回当前的上级菜单
}

const breadCrumbList : MenuItem[] = findParentNodeList(activeKey,menuData);
const handelBreadCrumbClick=()=>{
	//处理点击事件，跳转路由
}
// 面包屑组件
const BreadCrumb = ()=>{
	return {breadCrumbList.map((item,index)=>{
	   <div onClick={handelBreadCrumbClick}>{index!==0&&'/'}{item.label}</div>
	})}
}