React递归菜单

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 (
             
                 {this.renderMenu(item.children)}
             
            )
        }
        //没有子节点就返回当前的父节点
        return {item.title}
    })
}

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

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

最后渲染菜单

render() {
    return (
        

            
                {this.state.menuTree} 
            
        
    );
}

效果如图：

完整代码如下：

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 (
                 
                     {this.renderMenu(item.children)}
                 
                )
            }
            //没有子节点就返回当前的父节点
            return {item.title}
        })
    }

    render() {
        return (
            

                
                    {this.state.menuTree}
                
            
        );
    }
}

export default Index;