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);
        }
      })
    }