react-开发经验分享-树形结构的解析与运用（二）

// 实时显示下级页面的变化实例
// 封装函数：新增下级结构
/*
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);
        }
      })
    }