2-3 实现左侧的菜单展示
只需要给routes/index.js
文件里面添加isNav标识
与title
export const admainRoute = [
{
pathname:“/admin/dashboard”,
component:Dashboard,
title:“仪表盘”,
isNav:true
},
{
pathname:“/admin/article”,
component:Article,
exact:true,
title:“文章列表”,
isNav:true
},
{
pathname:“/admin/article/edit/:id”,
component:ArticleEdit,
},
{
pathname:“/admin/settings”,
component:Settings,
title:“设置”,
isNav:true
},
]
Frame组件
里面,对于adminRoute的isNav为true进行过滤
即可
const menu = admainRoute.filter(route=>route.isNav === true)
components/frame/index.js
文件 这里省略其余代码,只显示关键代码
mode=“inline”
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
style={{ height: ‘100%’ }}
{
menu.map(route=>{
return (
<Menu.Item key={route.pathname}>{route.title}</Menu.Item>
)
})
}
2-4 实现左侧的小图标
需要安装 yarn add @ant-design/icons
routes/index.js
文件进行修改
//使用antd里面的icon图标
import {
DashboardOutlined,
OrderedListOutlined,
SettingOutlined
} from ‘@ant-design/icons’;
import React from “react” //React必须要进行引入进来,作用就是帮助我们解析内部的jsx代码
export const admainRoute = [
{
pathname:“/admin/dashboard”,
component:Dashboard,
title:“仪表盘”,
isNav:true,
icon:
},
{
pathname:“/admin/article”,
component:Article,
exact:true,
title:“文章列表”,
isNav:true,
icon:
},
{
pathname:“/admin/article/edit/:id”,
component:ArticleEdit,
},
{
pathname:“/admin/settings”,
component:Settings,
title:“设置”,
isNav:true,
icon:
},
]
components/frame/index.js
文件 这里省略其余代码,只显示关键代码
mode=“inline”
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
style={{ height: ‘100%’ }}
{
menu.map(route=>{
return (
<Menu.Item key={route.pathname}>
{route.icon}
{route.title}
</Menu.Item>
)
})
}
2-5 实现点击菜单切换
需要查找Antd里面关于Menu菜单项,发现Menu的api上面有onClick方法
,
作用就是当我们点击每一项菜单的时候,这个事件函数就会触发,关键的一个参数是key
,就可以拿到对应的切换的当前路由路径
获取到key
之后,我们只需要调用this.props.history.push(key)
即可实现路由跳转,继而实现了菜单切换功能。
**//当我们点击Menu.Item的时候会触发
//路由相关的api history location match**
handleMenu = ({key})=>{
this.props.history.push(key)
}
mode=“inline”
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
style={{ height: ‘100%’ }}
onClick = {this.handleMenu}
{
…
}
发现上述代码报错,原因是Frame组件不是路由组件
,属性上面就不会有history相关的路由的api,
解决方案就是需要引入高阶组件withRouter进行嵌套包裹。
可以将目前的Frame组件包裹成伪路由组件,那么Frame组件属性上面自然就会有了history/location/match相关的api了,继而可以实现跳转功能了。
import {withRouter} from “react-router-dom”
@withRouter
class index extends Component {
…
}
export default index
实现了左侧菜单项颜色的切换效果
**运行之后会发现存在一些bug,通过api属性解决
**
Menu菜单的api属性上面有:
defaultSelectedKeys 初始选中的菜单项 key 数组
selectedKeys 当前选中的菜单项 key 数组
mode=“inline”
defaultSelectedKeys={[menu[0].pathname]}
selectedKeys={[this.props.location.pathname]}
style={{ height: ‘100%’ }}
onClick = {this.handleMenu}
…
其中,this.props.location.pathname
就是可以获取到当前的路由的路径,然后将其传入到selectedKeys的数组里面去,就可以实现F5刷新的时候,对应的样式还是当前选择的路由组件了。
调整了一下样式: (引入了短语法)
React 中的一个常见模式是一个组件返回多个元素。Fragments
允许你将子列表分组,而无需向 DOM 添加额外节点。
return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> )
你可以使用一种新的,且更简短的语法来声明 Fragments。它看起来像空标签:
return ( <> <td>Hello</td> <td>World</td> </> )
新建index.less
文件
#root,.ant-layout{
height:100%;
}
App.js
短语法
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
前端校招精编面试解析大全点击这里获取完整版pdf查看
轻大家的负担。**
[外链图片转存中…(img-4GiY5Yax-1712473072835)]
[外链图片转存中…(img-zKPWIpN4-1712473072835)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-yoslRZzJ-1712473072836)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
前端校招精编面试解析大全点击这里获取完整版pdf查看