react+antd menu实现无限级菜单

需求是后端会返回一个数组，需要生成一个无限级嵌套的菜单，类似

[
    {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'},
]

parentId为父级菜单的id，不多说，上代码

//菜单无限级递归函数
    menuRecursion = menu => {
        let treeData =[]
        let map = {}
        menu.forEach(item => {
            map[item.id] = item
        })
        menu.forEach(item => {
            let parent = map[item.parentId]
            if(parent){
                (parent.children || (parent.children=[])).push(item)
            }else{
                treeData.push(item)
            }
        })
        this.setState({
            menuList:treeData
        })
    }

结构部分如下，需要导入antd 的Menu和SubMenu,

menuRender = menu => 
        menu.map(item =>{
            if(item.children?.length>0) {
                return(
					<SubMenu
                        key= {item.id}
                        title={
                            <div>
                                <span>{item.name}</span>    
                            </div> 
                        }
                    >
                        {
                            this.menuRender(item.children)
                        }
                    </SubMenu>
                )
            }
            return(
                <Menu.Item
                    key={item.id}
                >
                    <span>{item.name}</span>
                </Menu.Item>
            )
    })

在Menu标签里调用即可

<Menu mode="inline">
  {this.menuRender(this.state.menuList)}
</Menu>

最后效果如图，不论返回的数组需要无限多级的子菜单嵌套都没有问题，希望能帮到正在需要帮助的朋友。