【antd】Tree組件實現父子節點分離(父子節點不相互關聯)

項目中我們遇到Tree組件的時候，默認的選中父節點的時候是相互關聯的效果，如下圖：

上圖點擊原子零件的時候下面的都會勾選中，但是，有的時候需要使得勾選父節點的時候不會影響到子節點，即勾選子節點的時候也要勾選上父節點給後臺傳過去

所以，這個時候就要用到antd中自帶的屬性 checkStrictly瞭如下所示：

打印出來的checkedKeys是一個包含checked和halfChecked兩個屬性的對象，如下圖：

代碼書寫如下：

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不適用這種方法，需要選子節點的時候自動給後臺傳過去父節點，我下一篇文章會介紹另一篇方法，別忘了關注一下呦～