react in the tree control using AntD

Configuration parameters

• checkable: Before adding a node Checkbox box
• checkedKeys: is an array, the array will be the same key in the key and the menu display selected
• defaultCheckedKeys tree node check box is checked by default
• defaultExpandAll default expand all tree nodes
• Click the check box trigger onCheck

data flow

The default menu data 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: "饼图" }
          ]
        },
      ]
    }
  ]

The key provided here unique path

Each row of data matches with the router

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