• 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>
                )
        })
    
  • 相关阅读:
    stack 栈
    链表
    2018.09.08 DL24 Day1 总结
    10.07 WZZX Day2总结
    10.06 WZZX Day1总结
    Joseph问题 (线段树)
    [POI2006]TET-Tetris 3D
    10.05FZSZ Day2模拟总结
    Tarjan求LCA
    数据结构
  • 原文地址:https://www.cnblogs.com/xyf724/p/14196655.html
Copyright © 2020-2023  润新知