因为我是初学,所以关于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>
)
}