<script> <Menu defaultSelectedKeys={['/home']} //数组类型 让那个key被选中 defaultOpenKeys={['sub1']} mode="inline" //菜单下拉方式 vertival theme="dark" inlineCollapsed={this.state.collapsed} ><Menu.Item key="/home"> <Link to="/home"> <Icon type="home" /> <span>首页</span> </Link> </Menu.Item>
<SubMenu key="pro" title={ <span> <Icon type="mail" /> <span>商品</span> </span> } > <Menu.Item key="/category"> <Link to="/category"> <Icon type="folder-open" /> <span>品类管理</span> </Link> </Menu.Item> <Menu.Item key="/products"> <Link to="/products"> <Icon type="filter" /> <span>商品管理</span> </Link> </Menu.Item> </SubMenu> </Menu>
</script>
每个menu都对应一个路由,所以配对的时候用路径
Menu.Item里的key就用路径来匹配 因为是唯一的
点击menu.item里的内容应该进行路由的跳转 所以用Link包裹起来
优化:不够灵活
一个菜单主要包含图标和文字和key 导航列表应该设置成为一个配置
src/config/menuConfig.js
<script> const menuList = [ { title: '首页', // 菜单标题名称 key: '/home', // 对应的path icon: 'home', // 图标名称 public: true, // 公开的 }, { title: '商品', key: '/products', icon: 'appstore', children: [ // 子菜单列表 { title: '品类管理', key: '/category', icon: 'bars' }, { title: '商品管理', key: '/product', icon: 'tool' }, ] }, { title: '用户管理', key: '/user', icon: 'user' }, { title: '角色管理', key: '/role', icon: 'safety', }, { title: '图形图表', key: '/charts', icon: 'area-chart', children: [ { title: '柱形图', key: '/charts/bar', icon: 'bar-chart' }, { title: '折线图', key: '/charts/line', icon: 'line-chart' }, { title: '饼图', key: '/charts/pie', icon: 'pie-chart' }, ] }, ] export default menuList </script>
根据menuList生成标签类型,把menu里的内容显示出来
根据数组数据生成标签数组
{menuList.map(item=>( <Menu.Item key={item.key}> <Link to={item.key}> <Icon type={item.icon} /> <span>{item.title}</span> </Link> </Menu.Item> ))}<script> //根据指定menu数据数组生成<Menu.Item>和SubMenu的数组 //map+函数递归 renderMenu = (menuList) => { return menuList.map(item => { if (!item.children) { return (<Menu.Item key={item.key}> <Link to={item.key}> <Icon type={item.icon} /> <span>{item.title}</span> </Link> </Menu.Item> ) } return( <SubMenu key={item.key} title={ <span> <Icon type={item.icon} /> <span>{item.title}</span> </span> } > {this.renderMenu2(item.children)} </SubMenu> ) }) } render() { return ( <div className={styles.leftNav}> <header> <Link to="/" > 后台系统 </Link> </header> <Menu defaultSelectedKeys={['/home']} // defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={this.state.collapsed} > {this.renderMenu(menuList)} </Menu> </div> ); } } </script/>
用reduce方法实现menu
//根据指定menu数据数组生成<Menu.Item>和SubMenu的数组 // reduce+函数递归 renderMenu2=(menuList)=>{ //求奇数和 const arr1=[1,2,3,4] arr1.reduce((preTotal,item)=>{ // return preTotal + item //这样是所有元素的和 必须把当此统计的结果return 变为下次统计的初始值 return proTotal + (item%2===1?item:0) //返回奇数和 这个是便利回调函数:统计:必须返回当此统计的结果 },0) //0代表的初始总和 }
<script> renderMenu2=(menuList)=>{ // //求奇数和 // const arr1=[1,2,3,4] // arr1.reduce((preTotal,item)=>{ // // return preTotal + item //这样是所有元素的和 必须把当此统计的结果return 变为下次统计的初始值 // return proTotal + (item%2===1?item:0) //返回奇数和 这个是便利回调函数:统计:必须返回当此统计的结果 // },0) //0代表的初始总和 return menuList.reduce((pre,item)=>{ //可能向pre添加<Menu.Item></Menu.Item> if(!item.children){ pre.push(<Menu.Item key={item.key}> <Link to={item.key}> <Icon type={item.icon} /> <span>{item.title}</span> </Link> </Menu.Item>) }else{ pre.push( <SubMenu key={item.key} title={ <span> <Icon type={item.icon} /> <span>{item.title}</span> </span> } > {this.renderMenu2(item.children)} </SubMenu>) } //可能是SubMenu return pre },[]) } </script>