React项目实战(二)

新建index.less文件并引入

.qf-header{

height: 64px;

background: #fff;

.logo{

height:64px;

img{

height:64px;

}

}

}

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 实现点击菜单切换

在官网中查阅文档学习Menu菜单项的api使用

需要查找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}

…

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-CMmNFf71-1715587880509)]

[外链图片转存中…(img-RI9tvc1E-1715587880510)]

[外链图片转存中…(img-0p6dPmzS-1715587880510)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！