一、路由配置
export const TabBarRouter = [
{
path:"/home",
icon:"\ue628",
name:"首页",
meta:{
flag:true
},
component:Home
},
{
path:"/find",
icon:"\ue663",
name:"发现",
meta:{
flag:true
},
component:Find
},
{
path:"/order",
name:"订单",
icon:"\ue737",
meta:{
flag:true
},
component:Order
},
{
path:"/mine",
name:"我的",
icon:"\ue617",
meta:{
flag:true
},
component:Mine
}
]
二、Tabbar遍历
<ul>
{
TabBarRouter.map((item,index) => (
<li key={index}>
<NavLink to={item.path}>
<i className="iconfont">{item.icon}</i>
<span>{item.name}</span>
</NavLink>
</li>
))
}
</ul>
三、
import researchItems from "research_menu.js";
import { Menu, Button, Icon } from 'antd';
const { SubMenu } = Menu;
componentWillMount(){
var currentMenulist;
if (this.props.is_research === 0) {
currentMenulist = researchItems;
} else {
currentMenulist = researchItems;
}
// --------------------------------------------------------------
const menu = currentMenulist.map(level1 => {
// 1级菜单下渲染2级菜单************
if (level1.child) {
const level2menu = level1.child.map(level2 => {
// -----------------------------------------------------------------------------------------
// 1级菜单下渲染2级菜单************
if (level2.child) { //如果2级菜单下有3级菜单 渲染3级菜单名字 + 下拉框
const level3menu = level2.child.map(level3 => {
if (level3.child) { //如果3级菜单下有4级菜单 有下拉框
const level4menu = level3.child.map(level4 => {
if (level4.child) {
return;
}else{
return(
// Option 9
{/* {level4.name} */}
{level4.name}
)
}
})
// 3级菜单下渲染4级菜单---------------------
let level3Title;
level3Title = (
{/* {level2.name[0]} */}
{level3.name}
{/* {level2.name} */}
);
return (
// 2级菜单下渲染3级菜单
{/* {level3.name} */}
{/* {level2.name} */}
{level4menu}
);
}else{ //如果3级菜单下没有4级菜单 直接渲染 没有下拉框
return(
// Option 9
{/* {level3.name} */}
{level3.name}
)
}
})
// ------------------------------------------------------------------------------
// // 2级菜单下渲染3级菜单---------------------
let level2Title;
level2Title = (
{/* {level2.name[0]} */}
{/* */}
{level2.name}
{/* {level1.name} */}
{/* {level2.name} */}
);
return (
// 2级菜单下渲染3级菜单
{/* {level3.name} */}
{/* {level2.name} */}
{level3menu}
);
}else{ //如果2级菜单下没有3级菜单 只渲染3级菜单名字 没有下拉框
return(
// Option 9
{/* {level2.name} */}
{/* */}
{level2.name}
)
}
// -----------------------------------------------------------------------------------------
})
// 1级菜单下渲染2级菜单---------------------
let level1Title;
level1Title = (
{/* 首页 */}
{level1.name}
);
return (
// 1级菜单下渲染2级菜单
{level2menu}
);
}
})
// --------------------------------------------------------------
this.menu = menu;
}
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['cloudProfile']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
// className="menus"
onOpenChange={this.handleOpenChange.bind(this)}
onSelect={this.handleSelect.bind(this)}
>
{/* ----------------------------------------------------------------- */}
{/* <Link>首页</Link> */}
{/* <li><Link to="http://localhost:8080/#/p">首页</Link></li> */}
{/* <li><Link to={`/${parentPath}`}>首页</Link></li> */}
{/* <Link to={`/p`}>首页</Link> */}
{/* <SubMenu key="cloudProfile" title={
} onTitleClick = {this.titleClick.bind(this)}>
<Menu.Item key="cloudProfilesa">
<Link to={`/${researchItems[0]['key'] + '/' + researchItems[0]['child'][0]['key']}`}>首页</Link>
</Menu.Item>
<Menu.Item key="cloudProfiles">虚拟资源云平台概况</Menu.Item>
<Menu.Item key="cloudProfilesc">容器平台概况</Menu.Item>
</SubMenu> */}
{/* ----------------------------------------------------------------- */}
{/* <SubMenu key="sub2" title="Navigation Two" title={
<span>
<Icon type="appstore" />
<span>Navigation Two</span>
</span>
}>
<Menu.Item key="9">
<Icon type="pie-chart" />
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</SubMenu> */}
{/* ----------------------------------------------------------------- */}
{this.menu}
</Menu>
