【antd】Tree组件实现父子节点分离(父子节点不相互关联)

项目中我们遇到Tree组件的时候，默认的选中父节点的时候是相互关联的效果，如下图：

屏幕快照 2019-08-05 下午4.59.37.png

上图点击原子零件的时候下面的都会勾选中，但是，有的时候需要使得勾选父节点的时候不会影响到子节点，即勾选子节点的时候也要勾选上父节点给后台传过去

WeChat2cee7be826074dbfe46c5d3a1a09c93a.png

所以，这个时候就要用到antd中自带的属性 checkStrictly了如下所示：

屏幕快照 2019-08-05 下午5.05.52.png

打印出来的checkedKeys是一个包含checked和halfChecked两个属性的对象，如下图：

屏幕快照 2019-08-05 下午5.08.03.png

onCheck =(checkedKeys)=>{
  this.setState({ 
      checkedTest: checkedKeys.checked,
    }
}
  <Tree
       checkable = {true}
       onCheck={this.onCheck}
       checkStrictly    //就是这个属性
       checkedKeys={this.state.checkedTest}
   >
                  
      {this.renderList(treeData,treekey)}
  </Tree>

注意：⚠️通过父子节点分离这种方法写出来的有一定的局限性，只是用于Tree结构比较少的情况，可以一个一个勾选，但是对于数结构庞大的json不适用这种方法，需要选子节点的时候自动给后台传过去父节点，我下一篇文章会介绍另一篇方法，别忘了关注一下呦～