AntDを使用して、ツリーコントロールに反応します

設定パラメータ

• チェック可能：ノードチェックボックスボックスを追加する前に
• checkedKeysは：配列であり、配列は、キーと選択されたメニュー画面で同じ鍵となります
• defaultCheckedKeysツリーノードのチェックボックスはデフォルトでチェックされています
• defaultExpandAllデフォルトすべてのツリーノードを展開
• チェックボックスのトリガーをクリックしますoncheckを

データフロー

デフォルトのメニューデータメニューリスト

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: "饼图" }
          ]
        },
      ]
    }
  ]

ここで一意のパスを提供し、キー

データの各行は、ルータと一致します

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