React antd 树组件自定义父子节点交互逻辑（包括全选，半选，全不选三种状态）使用checkStrictly使父子节点状态不再受控

有一种需求是单独选中父节点，而子节点不选中的情况，如图：

所以父节点要有三种状态可控制，点击父节点，先出现半选状态，再点击是全选状态， 之后点击就是全不选状态，所以有那么几种逻辑：

1. 父节点选中为半选状态，子节点不选中；

2. 父节点选中为勾选状态，子节点全部勾选；

3. 父节点取消选中，子节点全部取消勾选；

4. 子节点全部勾选，子节点最近一级的父节点是全选状态（再上一级根据旗下的子节点是否全选进行判断，以此类推...）；

5. 子节点全部取消勾选，父节点不取消，呈半选状态。

梳理一下代码的大概逻辑：

先使用checkStrictly使父子节点状态不再受控，checkedKeys属性有两个参数可以用来控制全选和半选状态（checked是所有勾选中的id，halfChecked是半选的id），通过setCheckedKeys来控制状态即可。

打印出的参数就是这样：

 接下来贴代码：

注：菜单树的数据我没有贴出来，涉及公司机密，数据就是树形数据形式。

 <Tree
      checkable
      onCheck={onCheck}
      treeData={treeInfo}
      checkedKeys={checkedKeys}
      checkStrictly  
    />

const [checkedKeys,setCheckedKeys] = useState([]); //控制状态


const onCheck = (checkedKeys, event) => {
    const { checked, halfChecked, children, key } = event.node; // 从参数解构出需要用到的数据
    const {
        checked: selectChecked, // 把checked存进selectChecked
        haldChecked: halfSelectChecked, // 把haldChecked存进halfSelectChecked
    } = checkedKeys;
    // 开始判断有无子节点(children)的node
    if(children && children.length > 0){
        // 有children
        if(!checked && !halfChecked){
            // 半选
            const nodes = getFathersById(event.node.key, treeInfo, 'id').filter(