react 项目中使用antd框架,对导航多层渲染
const slideNav = slideData.map((item, index) => { //一级循环
return (
<SubMenu key={item.oneKey}
icon={<img src={item.urlImg} alt=""></img>}
title={item.oneTitle}>
{
item.oneList.map((item1, index1) => //二级循环
//使用三目运算符来渲染是否存在三级导航栏
item1.twoList ?
//如果有三级导航栏
(
<SubMenu title={item1.twoTitle} key={item1.twoKey}>
{
item1.twoList.map((item2, index2) =>{ //三级嵌套
return (
<Menu.Item key={item2.threeKey}>
{item2.threeTitle}
</Menu.Item>
)
}
)
}
</SubMenu>
) :
// 没有twoList,即没有三级导航栏
(
<Menu.Item key={item1.twoKey}>
<Link to="/">{item1.twoTitle}</Link>
</Menu.Item>
)
)
}
</SubMenu>
)
})