react中使用AntD的树形控件

参数配置

• checkable：节点前添加 Checkbox 复选框
• checkedKeys：就是一个数组，数组中的key与菜单中的key相同的就会显示选中状态
• defaultCheckedKeys 默认选中复选框的树节点
• defaultExpandAll 默认展开所有树节点
• onCheck 点击复选框触发

数据流

默认的菜单数据 menuList

const menuList =
  [
    {
      key: "/", title: "首页", path: "/",
      children: [
        {
          key: "/ui", title: "UI", children: [
            { key:"/ui/button",path: "/ui/button", title: "button" }, { key:"/ui/tab",path: "/ui/tab", title: "tab" }
          ]
        },
        { key: "/user", path: "/user", title: "用户" },
        {
          key: "/article", title: "文章", children: [
            { key:"/articleList",path: "/articleList", title: "文章列表" }, {key:"/articleAdd", path: "/articleAdd", title: "添加文章" }
          ]
        },
        {
          key: "/chart", title: "图表", children: [
            { key:"/chart/bar",path: "/chart/bar", title: "柱状图" }, {key:"/chart/pie", path: "/chart/pie", title: "饼图" }
          ]
        },
      ]
    }
  ]

这里把key设置成路径具有唯一性

匹配每行数据中的router

getMenuList(routers){
  let  checkedKeys=routers.map((elem)=>{
    return elem.key
  })
  this.setState({
    checkedKeys
  })
}