react动态导航

因为我是初学，所以关于react的文章会比较浅显，见谅

因为我是用的antd配合学习的，然后再导航这块发现他们是写在一起的，然后我是从vue那边过来的，所以就感觉很别扭。同时也查阅了官方文档怎么配合列表组合。

render() {
	const subItems = [{
	    key: 'sub1',
	    name: 'Navigation O',
	    type: 'mail',
	    items: [{
	        key: '1',
	        name: 'Option 1'
	    }, {
	        key: '2',
	        name: 'Option 1'
	    }, {
	        key: '3',
	        name: 'Option 1'
	    }, {
	        key: '4',
	        name: 'Option 1'
	    }]
	}, {
	    key: 'sub2',
	    name: 'Navigation Two',
	    type: 'mail',
	    items: [{
	        key: '5',
	        name: 'Option 1'
	    }, {
	        key: '6',
	        name: 'Option 1'
	    }, {
	        key: '7',
	        name: 'Option 1'
	    }, {
	        key: '8',
	        name: 'Option 1'
	    }]
	}, {
	    key: '9',
	    name: 'Option 1'
	}, {
	    key: 'sub3',
	    name: 'Navigation Three',
	    type: 'mail',
	    items: [{
	        key: '10',
	        name: 'Option 1'
	    }, {
	        key: '11',
	        name: 'Option 1'
	    }, {
	        key: '12',
	        name: 'Option 1'
	    }, {
	        key: '13',
	        name: 'Option 1'
	    }]
	}, ]
	const menuListItems = subItems.map((item) => {
        if (item.items) {
            return <SubMenu
	            key = {item.key}
	            title = { 
	            	<span>
	                    <Icon type = {item.type} />
	                    <span>{item.name}</span >
	                </span>
	             }
            >
    			{item.items.map(_item => {
    				return <Menu.Item key={_item.key}>{_item.name}</Menu.Item >
            	})} 
            </SubMenu>
        } else {
    		return <Menu.Item key={item.key}>{item.name}</Menu.Item >
		}
	})
	return (
			<Menu mode = "inline"
		        defaultSelectedKeys = {this.state.selectedKeys}
		        openKeys = {this.state.openKeys}
		        onOpenChange = {this.onOpenChange}
		        onSelect = {this.menuSelect}
		        style = {{width: 200}} 
		    > 
		        {menuListItems} 
	        </Menu>
    )
}

效果