javascript - 用React根据json数据自动生成左侧导航

问题描述

问 题

1.先上图，下图是最终需要实现的效果。

2.需求：根据后台传来的json，自动生成一二三级导航，因ui设计的一级、二级和三级导航的样式均不一样，所以每级导航的class必须不同（尝试修改antd的左侧导航，但未成功），如一级导航li的class为menu-first，二级li的class为menu-second...。一二三级导航的容器class分别为menu-first-wrap、menu-second-wrap...，最终需要实现的html代码如下

<li><a class="menu-first" data-url="" href="#"><i class="ico-menu-b"></i>数据管理</a>
                            <ul class="menu-second-wrap" style="display: block;">
                                
                                    
                                        <li><a class="menu-second" data-url="data/historyList" href="#">时段数据</a>
                                            <ul class="menu-third">
                                                
                                            </ul></li>
                                    
                                
                                    
                                        <li><a class="menu-second" data-url="dataInput/list" href="#">数据录入</a>
                                            <ul class="menu-third">
                                                
                                            </ul></li>
                                    
                                
                                    
                                        <li><a class="menu-second" data-url="" href="#">数据确认</a>
                                            <ul class="menu-third">
                                                
                                                    
                                                        <li><a data-url="audit/list" href="#">数据审核</a></li>
                                                    
                                                
                                                    
                                                        <li><a data-url="confirm/list" href="#">数据确认</a></li>
                                                    
                                                
                                            </ul></li>
                                    
                                
                                    
                                        <li><a class="menu-second" data-url="" href="#">数据报表</a>
                                            <ul class="menu-third">
                                                
                                                    
                                                        <li><a data-url="report/wqsurvey/list?type=1" href="#">综合报表</a></li>
                                                    
                                                
                                                    
                                                        <li><a data-url="report/wqsurveyfile/list" href="#">监测报告</a></li>
                                                    
                                                
                                            </ul></li>
                                    
                                
                            </ul></li>

3.数据格式如下：

[  {
        "name": "一级菜单",
        "submenu": [
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "submenu": [
                    {
                        "name": "三级菜单",
                        "submenu": [
                            {
                                "name": "四级菜单",
                                "url": ""
                            }
                        ]
                    },
                    {
                        "name": "三级菜单",
                        "url": ""
                    }
                ]
            },
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "submenu": [
                    {
                        "name": "三级菜单",
                        "submenu": [
                            {
                                "name": "四级菜单",
                                "url": ""
                            },
                            {
                                "name": "四级菜单",
                                "submenu": [
                                    {
                                        "name": "五级菜单",
                                        "url": ""
                                    },
                                    {
                                        "name": "五级菜单",
                                        "url": ""
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "name": "三级菜单",
                        "url": ""
                    }
                ]
            },
            {
                "name": "二级菜单",
                "url": ""
            }
        ]
    }]

4.请那位大神能够教教我如何写，最主要的就是如何将不同层级的导航item和wrap加上相对应的class就行了。

解决方案

可以和后端沟通, 加一个字段为level(标识第几级),
现在的数据结构也可以, 自己做一个标识位当前是第几级(方法自己想, 简单),
首先拿到这段json, map:

json.map(function(o,i,objs){
    let submenus; 
    if(o.submenu.length > 0){
        submenus = 二级菜单jsx方法(o.submenu);//注
    }
    <构造一级菜单>
        {submenus}
    </构造一级菜单>
})

//注: 如果相同样式表 可以递归, 不同在写get其他level的下级菜单方法.

这篇关于javascript - 用React根据json数据自动生成左侧导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！