react-開發經驗分享-樹形結構的解析與運用（二）

Author：Mr.柳上原

• 付出不亞於任何的努力
• 願我們所有的努力，都不會被生活辜負
• 不忘初心，方得始終

ant框架裏，tree結構的剖析
承接上文
問題：ant的異步樹形結構，當渲染下級結構完成後，再次在主幹新建一個新的下級結構時，不會實時渲染出新增加的那條下級結構，必須刷新整個頁面，重新後端請求數據，並進行渲染，這是一個不好的體驗
3.根據ant的tree結構，自定義實時渲染tree結構頁面
思路：使用遞歸模式

// 實時顯示下級頁面的變化實例
// 封裝函數：新增下級結構
/*
tree爲當前已經被渲染出來的所有tree結構（根據ant框架自帶的onLoadData方法實時獲取）
id爲新增的treeChildren的上級id屬性（根據ant框架自帶的onSelect方法的參數info獲取）
addData爲新增的treeChildren的屬性（根據新增時填寫的form表單獲取）
*/
const add = (tree = [], id = '', addData = {}) => {
      tree.forEach((item, index) => {
        if (item.id === id) {
          const children = tree[index].children || []
          children.push(addData)
        } else {
          add(item.children, id, addData)
        }
      })
    }

// 封裝函數：修改下級結構
/*
tree爲當前已經被渲染出來的所有tree結構（根據ant框架自帶的onLoadData方法實時獲取）
id爲修改的treeChildren的id屬性（根據ant框架自帶的onSelect方法的參數info獲取）
editData爲修改的treeChildren的屬性（根據修改時填寫的form表單獲取）
*/
const edit = (tree = [], id = '', editData = {}) => {
      tree.forEach((item, index) => {
        if (item.id === id) {
          tree[index] = {...item, ...editData}
        } else {
          edit(item.children, id, editData)
        }
      })
    }

// 封裝函數：刪除下級結構
/*
tree爲當前已經被渲染出來的所有tree結構（根據ant框架自帶的onLoadData方法實時獲取）
id爲新增的treeChildren的id屬性（根據ant框架自帶的onSelect方法的參數info獲取）
*/
const del = (tree = [], id = '') => {
      tree.forEach((item, index) => {
        if (item.id === id) {
          tree.splice(index, 1);
        } else {
          del(item.children, id);
        }
      })
    }