React + antd树状结构目录

在开发后台管理的时候，基本上都会有导航菜单的管理。如果是稍微复杂一点的，还会有权限管理，就是对菜单做权限管理，不同的角色，看到不同的菜单。
只有超级管理员才能分配角色权限。现在实现这两种情况下在菜单目录：
图一：

图二：

图一，默认的总菜单，只有超级管理员才能看到所有的菜单；图二是分配菜单的目录，根据用户的角色权限来分配对应的菜单目录。

图一的效果，使用了antd的Menu组件，根据菜单目录的json来渲染的，当从数据库里读取出数据后，是将数据保存到redux中，或者是mobx，避免在分配页面重新请求数据。

这里没有后端数据，就在本地模拟一下JSON数据：

const menuState= [
    {
        title: "Echarts",
        key: "1",
        router: null,
        children: [
            { title: "dashboard", key: '1-1', router: "/components/dashboard", component: "Dashboard" },
            { title: "柱状图", key: '1
1
2
3
4
5
6
7