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>
            )
    })

标签：map,item1,多层,react,item,twoList,antd,导航,三级
来源： https://www.cnblogs.com/xyf724/p/14196655.html