React递归菜单

最新推荐文章于 2024-09-06 18:00:29 发布

黄恒愉

最新推荐文章于 2024-09-06 18:00:29 发布

阅读量2.6k

点赞数 1

文章标签：递归菜单 React

本文链接：https://blog.csdn.net/weixin_45415885/article/details/96600257

版权

React加antd实现动态递归菜单

前提：
1、 import antd 的菜单组件
import {Menu} from ‘antd’;
2、定义好子节点菜单
const { SubMenu } = Menu;
可以直接参考最后的完整代码。

首先我的菜单数据是这样的

 menuList = [
        {   title: '父级菜单1',
            key: '/home',
            children: [
                {  title: '二级菜单1',
                    key: '/home/m1',
                },
                { title: '二级菜单2',
                    key: '/home/m2',
                }
                ]
        },
        {   title: '父级菜单2',
            key: '/login',
            children: [
            {  title: '二级菜单3',
                key: '/login/m3',
            },
            {   title: '二级菜单4',
                key: '/login/m4',
            }
              ]
        } ];

然后定义渲染的函数，返回一个虚拟DOM对象

renderMenu=(data)=>{
    return data.map((item)=>{
        if (item.children) {  //如果有子节点，继续递归调用，直到没有子节点
            return (
             <SubMenu title={item.title} key={item.key}>
                 {this.renderMenu(item.children)}
             </SubMenu>
            )
        }
        //没有子节点就返回当前的父节点
        return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
    })
}

在 componentWillMount()函数中调用renderMenu()函数，把菜单数据传进去。

  componentWillMount(){
       const menuTree = this.renderMenu(this.menuList);
       this.setState({menuTree}); //将数据存放在menuTree中
    }

最后渲染菜单

render() {
    return (
        <div style={{  width: '150px'}}>
            <Menu theme={'dark'}>
                {this.state.menuTree} 
            </Menu>
        </div>
    );
}

效果如图：
在这里插入图片描述

完整代码如下：

import React, {Component} from 'react';
import {Menu} from 'antd';
const { SubMenu } = Menu; 
class Index extends Component {
    constructor(props) {
        super(props);
        this.state={
            menuTree: [ ]
        }
    }
     menuList = [
        {   title: '父级菜单1',
            key: '/home',
            children: [
                {  title: '二级菜单1',
                    key: '/home/m1',
                },
                { title: '二级菜单2',
                    key: '/home/m2',
                }
                ]
        },
        {   title: '父级菜单2',
            key: '/login',
            children: [
            {  title: '二级菜单3',
                key: '/login/m3',
            },
            {   title: '二级菜单4',
                key: '/login/m4',
            }
              ]
        } ];
    componentWillMount(){
       const menuTree = this.renderMenu(this.menuList);
       this.setState({menuTree}); //将数据存放在menuTree中
    }
    /*
    *渲染菜单
     */
    renderMenu=(data)=>{
        return data.map((item)=>{
            if (item.children) {  //如果有子节点，继续递归调用，直到没有子节点
                return (
                 <SubMenu title={item.title} key={item.key}>
                     {this.renderMenu(item.children)}
                 </SubMenu>
                )
            }
            //没有子节点就返回当前的父节点
            return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
        })
    }

    render() {
        return (
            <div style={{  width: '150px'}}>
                <Menu theme={'dark'}>
                    {this.state.menuTree}
                </Menu>
            </div>
        );
    }
}

export default Index;