• 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>
                )
        })
    
  • 相关阅读:
    第十四周作业
    十二
    第十一周作业
    第十周作业
    第八周作业
    第七周
    软件工程作业2
    自我介绍
    2019春总结作业
    2019春第一次课程设计实验报告
  • 原文地址:https://www.cnblogs.com/xyf724/p/14196655.html
Copyright © 2020-2023  润新知