react+antd menu实现无限级菜单

StupigYy

已于 2022-09-16 10:27:08 修改

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端 react

于 2022-09-06 09:27:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36384745/article/details/126717999

本文介绍如何使用JavaScript处理后端返回的数组数据，通过menuRecursion函数实现菜单的无限级嵌套，以Ant Design的Menu和SubMenu组件为例，展示了如何在前端渲染出动态的菜单结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

[
    {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>

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