基于React.js的后台管理系统开发全过程(四)
一.实现左侧导航栏的二级路由
前言：原本打算是不使用antd，只想用Material UI来完成左侧导航列表的折叠伸缩效果的，结果试了一上午，只能感叹不得不承认还是antd封装的后台管理系统完善。
文章图片
文章图片
虽然使用MaUI也完成了相关的一些搭配，不过它封装的效果不够完善，它是利用in属性的变化，来完成折叠伸缩的效果，但是很坑的是如果你想把整个左边菜单栏用数组渲染出来的时候，就会发现一个问题，某个列表的点击事件会把所有的列表全部展开，因为渲染列表的时候所有的in属性共用着一个状态，下面是我只点击了·商品·这个链接出现的效果:
文章图片
这是完全不符合我的预期的，虽然你可以给每个onClick事件，但是这是非常繁琐，不管是代码的复用性还是后面用数组渲染，都是很难管理的。（可能有好的办法但是以目前我的水平来说暂时办不到，以后有机会可能会更改本篇文章）。
故果断采用antd的组件。
文章图片
由于antd把折叠打开的效果封装在了单独的组件内，所以各个组件相互都没影响
文章图片
这样就清爽多了.
接下来去路由表里设置二级路由。创建以下文件夹，并且创建相应的.jsx文件，分别对应我们后续需要用到的各个部分。
文章图片
在这里再强调一下：
这些路由组件，都是dashboard页面的子路由，所以我们就路由表的
文章图片
同样的道理，想用就得先引入:
文章图片
依次设置以下子路由，不要忘了children对象的属性是一个数组。
文章图片
然后去对应的地方添加标签,这里我把key换成路由路径了，这不是必须的。
文章图片
（图表页面同样的道理，图片太大就不放进来了）
二.列表渲染的优化
【基于React.js的后台管理系统开发全过程(四)】现在虽然看到了页面的效果，但是这样的列表是死的，不方便复用。我们需要把它通过向之前的todolist案例一样，通过数组把它渲染出来。
首先需要做的是，观察这个列表的结构，思考数组里需要有哪些值。在Config文件夹下创建siderBarList文件夹
文章图片
我知道了需要渲染用到的变量是这些，而我的组件的path是一样的，所以可以只设置一个关键词key就可以了，icon用来存放图标信息。
文章图片
我们先不用管折线图，先完成这一部分。
文章图片
返会侧边栏组件，不需要思考，直接引入刚刚写好的变量
文章图片
现在需要编写一个函数来自动选入这个数组，
1.逐步分析，首先需要判断这个渲染的对象是否有二级路由，如果没有，直接渲染出
文章图片
2.如果有二级路由的话，我们就需要考虑二次渲染，
文章图片
这里使用了函数递归调用自身，其实这里就相当于重新写了这行代码而已，需要仔细去理解一下。
文章图片
看一下页面效果，并没有报错
文章图片
推荐阅读
- Java|挑战年薪50万不是梦，你要的高级架构师课程来袭！
- 怎么换广东的ip
- Win7中让完整快捷菜单显示的妙招
- 改变Win7电脑分辨率的妙招
- 大师教你设置Mac系统定时开关机的高招
- XP升级到Win7的贴心提示
- 教你运用Win7任务栏的技巧
- 电脑关机耗时久的处理办法
- Win7中删除运用记录的秘诀
- 延长Win7电池运用时间的技巧