})
}
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
短语法
export default class App extends Component {
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
w0k-1710691555348)]
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
[外链图片转存中…(img-ypZ9coUN-1710691555348)]