React递归菜单(推荐)

React递归菜单_react menu 递归_黄恒愉的博客-CSDN博客React加antd实现动态递归菜单前提：1、 import antd 的 菜单组件 2、定义好子节点菜单const { SubMenu } = Menu;可以直接参考最后的完整代码。首先我的菜单数据是这样的 menuList = [ { title: '父级菜单1', key: '/home', children: ...https://blog.csdn.net/weixin_45415885/article/details/96600257

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;