一、前言

使用antd的tree組件實(shí)現(xiàn)下面這樣的模塊樹，點(diǎn)擊標(biāo)題請(qǐng)求其下列表的數(shù)據(jù)，點(diǎn)擊標(biāo)題旁邊的操作圖標(biāo)則執(zhí)行對(duì)應(yīng)的增刪改功能：

二、實(shí)現(xiàn)方案

1.封裝一個(gè)設(shè)置樹標(biāo)題的方法，通過開關(guān)改變state來控制圖標(biāo)按鈕是否可見：

處理樹數(shù)據(jù)（name、children）

  const setTree = (module_data: any) => {
    return module_data.map((item: any) => {
      let _json = { ...item };
      _json.name = setTreeTitle(item);
      _json.children = item.children ? setTree(item.children) : [];
      return _json;
    });
  };

賦值給Tree的treeData：

<Tree
   ...
        treeData={setTree(treeData)} 
        ...
        fieldNames={{ title: 'name', key: 'id', children: 'children' }}
      />

2.樹標(biāo)題被選中時(shí)，則調(diào)用刷新列表的方法:

onSelect={(value: any, e: any) => {
      if (e.selected) {
        treeSelectFunc(value[0]);
      }
    }}

3.但需要注意的坑是，由于我增加了刪除功能，當(dāng)執(zhí)行刪除操作后，樹處于選中狀態(tài)的話就會(huì)報(bào)錯(cuò)，因?yàn)樘幱谶x中狀態(tài)就會(huì)調(diào)用刷新列表的方法，但該數(shù)據(jù)已經(jīng)被我刪除了，可能因此報(bào)錯(cuò)：

所以我們需要?jiǎng)?chuàng)建一個(gè)state來存儲(chǔ)當(dāng)前選中的數(shù)據(jù)：

const [selectId, setSelectId] = useState<any>(null);

然后在onSelect方法中判斷新選中的數(shù)據(jù)是否是當(dāng)前數(shù)據(jù)，如果是則不再執(zhí)行請(qǐng)求方法：

onSelect={(value: any, e: any) => {
  const selectValue = value[0]
  if (e.selected && selectValue !== selectId) {
    treeSelectFunc(selectValue);
    setSelectId(selectValue)
  }
}}

這樣就解決了刪除數(shù)據(jù)可能報(bào)錯(cuò)的問題。

三、總結(jié)

發(fā)這篇文章的目的是好久沒發(fā)文了，活躍度掉了不少！周排名總排名一直再降，所以先水一篇穩(wěn)一波。
等閑下來的時(shí)候還是要堅(jiān)持寫作來鞏固提升自己。