【前端】ant design中树形控件的父子节点受控实现

前言：

1.ant design的树形控件里面先设置好checkStrictly属性，即checkable 状态下节点选择完全受控（父子节点选中状态不再关联），这样的话，onCheck函数中的checkedKeys参数打印出来它是一个有chekced和halfChecked属性的对象，并且父子节点的选中与否不再关联；

onCheck=(checkedKeys,event)=>{
   console.log(checkedKeys,event)
}
// 打印的第一个是{checked:[],halfChecked:[]}
// evet.node.props.dataRef打印出来就是点击的节点的相关信息

// 目录树的数据结构如下
[
   {
    menuId:'1222',// 节点id
    menuName:'xxx',// 节点显示的名字
    pMenuId:'-1',// 父节点的id，没有父节点就为-1
    hasChild:true,// 是否有孩子节点
    authority:true,// 是否是选中状态
    children:[
     {
       menuId:'1452',
       menuName:'xxx',
       pMenuId:'1222',
       hasChild:false,
       authority:false
     }
    ]
   },
   ...
]

2.checked是一个数组，里面存放所有选中的树节点，halfChecked也是一个数组，里面存放的是关联子节点的父节点

需求：

1.点击父节点，对子节点没有影响，而取消父节点的选中状态，其所有的孩子节点都取消选中(checked:false)，且提交的时候如果父节点是选中状态，必有一个孩子节点是选中状态（如果第一个孩子还有孩子，那么孩子的孩子也必须有一个选中状态，以此类推。。。）否则的话会弹出提示框；

2.点击子节点，如果其父节点下只有这一个子节点是选中状态，那么父节点也变为选中状态；取消选中子节点，同理如果其父节点下没有子节点是选中状态，父节点也取消选中状态。

实现：

1.在渲染TreeNode的时候传入一个path值，可以用来追根溯源，找到祖辈的节点id；

2.需要设置一个名为checkedNodes的state值，是一个对象形式，在初始化的时候需要遍历所有选中状态的节点，设置成如下形式：

{父节点1:[子节点1,子节点2,...],父节点2:[子节点1,子节点2,...]}

/**
   * 用来处理菜单授权的目录树默认选中的节点
   * 因为函数里面涉及到递归操作所以必须要在函数外定义初始变量
   * @param checkedKeys 存放选中状态的节点id
   * @param menuId 树节点所有信息的数组
   * @param checkedNodes {父节点:[子节点1,子节点2,...]}
   */
  dealDefaultMenuId = (checkedKeys, menuId, checkedNodes) => {
    const nodes = chec