AntD導航選單開發，剛開始是二級選單不顯示，然后用遍歷的方式顯示選單多個內容，不知道哪兒出錯了，求大神指教

'index.js'
import React from 'react'
import{Menu,Icon}from 'antd';
import menuList from './../../config/menuConfig'
import './index.less'

import Item from 'antd/lib/list/Item';
const SubMenu=Menu.SubMenu;



export default class NevLeft extends React.Component{
    stste ={
        rootSubmenuKeys:[],
        openKeys:[],
    };
    componentWillMount(){
        const menuTreeNode=this.renderMenu(menuList);
        this.setState({
            menuTreeNode
        })
    }
    //選單渲染
    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>
                    <div className="logo">
                        <img src="https://bbs.csdn.net/assets/logo-ant.svg" alt=""/>
                        <h1>Imooc MS</h1>
    
                    </div>
                    <Menu theme="dark">
                        {this.setState.menuTreeNode}
                  
                    </Menu>
                </div>
            );
        }
}

'common.less'
.container{
    
    .nev-left{
        background: color #001529; ;
        color: #ffffff;
     
        height: calc(100vh);
      
       
    }
    .main{
        
        height: calc(100vh);
    }
    .content{
        position: relative;
        padding: 20px;
    }
}



menuconfig.js
const menuList = [
    {
        title:'首頁',
        key:'/admin/home'
    },
    {
        title:'UI',
        key:'/admin/ui',
        children:[
            {
                title:'按鈕',
                key:'/admin/ui/buttons',
            },
            {
                title:'彈框',
                key:'/admin/ui/modals',
            },
            {
                title:'Loading',
                key:'/admin/ui/loadings',
            },
            {
                title:'通知提醒',
                key:'/admin/ui/notification',
            },
            {
                title:'全域Message',
                key:'/admin/ui/messages',
            },
            {
                title:'Tab頁簽',
                key:'/admin/ui/tabs',
            },
            {
                title:'圖片畫廊',
                key:'/admin/ui/gallery',
            },
            {
                title:'輪播圖',
                key:'/admin/ui/carousel',
            }
        ]
    },
    {
        title:'表單',
        key:'/admin/form',
        children:[
            {
                title:'登錄',
                key:'/admin/form/login',
            },
            {
                title:'注冊',
                key:'/admin/form/reg',
            }
        ]
    },
    {
        title:'表格',
        key:'/admin/table',
        children:[
            {
                title:'基礎表格',
                key:'/admin/table/basic',
            },
            {
                title:'高級表格',
                key:'/admin/table/high',
            }
        ]
    },
    {
        title:'富文本',
        key:'/admin/rich'
    },
    {
        title:'城市管理',
        key:'/admin/city'
    },
    {
        title:'訂單管理',
        key:'/admin/order',
        btnList:[
            {
                title:'訂單詳情',
                key:'detail'
            },
            {
                title:'結束訂單',
                key:'finish'
            }
        ]
    },
    {
        title:'員工管理',
        key:'/admin/user'
    },
    {
        title:'車輛地圖',
        key:'/admin/bikeMap'
    },
    {
        title:'圖示',
        key:'/admin/charts',
        children:[
            {
                title:'柱形圖',
                key:'/admin/charts/bar'
            },
            {
                title:'餅圖',
                key:'/admin/charts/pie'
            },
            {
                title:'折線圖',
                key:'/admin/charts/line'
            },
        ]
    },
    {
        title:'權限設定',
        key:'/admin/permission'
    },
];
export default menuList;

uj5u.com熱心網友回復：

然后也沒有報錯

uj5u.com熱心網友回復：

實際做出來的話左邊那個選單欄下面有我config里面寫的所有選項

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275364.html

標籤：其他

上一篇：HTML和CSS

下一篇：請問echarts legend 分組，水平排列問題，這種怎么做？