Closed HeavenSky closed 6 years ago
第一回用pull request,有种code review的既视感,感觉有点意思 三个commit除了分离侧边栏的那个提交,其他两个改动比较简单, 下面我详细说说分离侧边栏代码改动:
<Menu>...</Menu>
SiderMenu
props
Menu
menus
// 无二级菜单 key:路由信息 title:中文label icon:图标Icon组件的type属性 { key: '/app/dashboard/index', title: '首页', icon: 'mobile', },
// 有二级菜单 基本和一级菜单一致, 多了个sub属性,sub是个数组,数组元素和前面介绍的格式一致 { key: '/app/ui', title: 'UI', icon: 'scan', sub: [ { key: '/app/ui/buttons', title: '按钮', icon: '', }, { key: '/app/ui/icons', title: '图标', icon: '', }, { key: '/app/ui/spins', title: '加载中', icon: '', }, { key: '/app/ui/modals', title: '对话框', icon: '', }, { key: '/app/ui/notifications', title: '通知提醒框', icon: '', }, { key: '/app/ui/tabs', title: '标签页', icon: '', }, { key: '/app/ui/banners', title: '轮播图', icon: '', }, { key: '/app/ui/wysiwyg', title: '富文本', icon: '', }, { key: '/app/ui/drags', title: '拖拽', icon: '', }, { key: '/app/ui/gallery', title: '画廊', icon: '', }, ], },
侧边栏UI的问题
谢谢PR
第一回用pull request,有种code review的既视感,感觉有点意思 三个commit除了分离侧边栏的那个提交,其他两个改动比较简单, 下面我详细说说分离侧边栏代码改动:
<Menu>...</Menu>
部分提取出来做无状态组件SiderMenu
SiderMenu
的props
中menus用来传递菜单数据,其余props
全部继承传给Menu
menus
是一个数组,每个数组元素为// 有二级菜单 基本和一级菜单一致, 多了个sub属性,sub是个数组,数组元素和前面介绍的格式一致 { key: '/app/ui', title: 'UI', icon: 'scan', sub: [ { key: '/app/ui/buttons', title: '按钮', icon: '', }, { key: '/app/ui/icons', title: '图标', icon: '', }, { key: '/app/ui/spins', title: '加载中', icon: '', }, { key: '/app/ui/modals', title: '对话框', icon: '', }, { key: '/app/ui/notifications', title: '通知提醒框', icon: '', }, { key: '/app/ui/tabs', title: '标签页', icon: '', }, { key: '/app/ui/banners', title: '轮播图', icon: '', }, { key: '/app/ui/wysiwyg', title: '富文本', icon: '', }, { key: '/app/ui/drags', title: '拖拽', icon: '', }, { key: '/app/ui/gallery', title: '画廊', icon: '', }, ], },