React antd tree树组件 - 父子节点没有自动关联情况下 - 显示半选、全选状态以及实现父子节点互动

实现的效果图如下：

如Ant Design Vue 中所示，并没有提供获取半选节点的方法，当设置checked和checkStrictly时，父子节点也不再自动关联了

前提：从后端可以获取的数据分别是完整的树型数据、所有选中的节点数据（一个数组、同时包含 父节点和子节点），具体的大概数据可以看下面
树形结构（二重），parId是-1则表示是父节点数据：

这是返回的已选中节点的数组：

下面是具体的代码：

state = {
   
  treeData: [], // 树形数据
  checkedKeys: [],
  checkable: false, // 因为我的页面是树型结构在页面右侧，根据左侧显示具体（看自己需求）
  loading: true,
  halfChecked: [], // 半选
  checked: [] // 全选
};

render() {
   
const {
    checkedKeys, treeData, checkable, halfChecked, checked, loading } = this.state
<Tree
  ref={
   r => this.treeRef = r}
  className={
   styles.menuTree}
  blockNode
  showLine
  // selectable={false}
  checkable={
   checkable}
  defaultExpandAll
  // checkedKeys={checkedKeys}
  checkedKeys={
   {
   
    checked,
    halfChecked
  }}
  checkStrictly
  onCheck={
   ({
     checked: ck, halfChecked: hc, ...oth }, {
     checked, node: {
     props: {
     dataRef } } }) => {
   
    // 选择
    if (checked && dataRef.id