react+antd breadcrumb实现无限级面包屑

上一篇说到了无限级菜单，那么为了用户能准确的知道自己所在的文件层级位置，breadcrumb面包屑无疑是最好的解决办法，还是用上次的无限级菜单数据数组

 

this.testArray=[
    {id:'1',name:'建筑物'，parentId:'-1'},
    {id:'2',name:'居民楼'，parentId:'1'},
    {id:'3',name:'办公楼'，parentId:'1'},
    {id:'4',name:'棚户'，parentId:'1'},
    {id:'5',name:'三极目录'，parentId:'4'},
    {id:'6',name:'电力设施'，parentId:'-1'},
    {id:'7',name:'abc'，parentId:'-1'},
    {id:'8',name:'cc'，parentId:'7'},
]

此时可以结合点击事件触发的函数，获取当前点击的id值

onClick = e =>{
   let breadCrumb= []
   this.breadCrumb =this.breadCrumbReduce(e,breadCrumb) 
}
breadCrumbReduce = (id,arr) => {
    let array = this.textArray
    for (let i = 0; i < array.length; i++) {
        if (array[i].id === id) {
            arr.splice(0, 0, { name: array[i].name, parentId: array[i].parentId, id: array[i].id })
            if (array[i].parentId !== -1) {
                this.breadCrumbReduce(array[i].parentId, arr);
            }
            break;
        }
     }
     return arr;
}

此时一个无限级且会判定一级的面包屑就好了，面包屑结构体为

<Breadcrumb
    separator=">"
>
    {
        this.breadCrumb.map(
            (item)=>{
                return(
                    <Breadcrumb.Item key={item.id}>{item.name}</Breadcrumb.Item>
                )
            }
        )
     }
</Breadcrumb>

，最后上效果图