从树中递归删除项目 [英] Remove item recusively from tree

问题描述

我正在尝试创建一个树组件.但我不知道如何在树内递归删除项目.

I'm trying to create a tree component. But I dont know how remove a item recursively inside a tree.

每个项目都是动态创建的，我想删除每个级别中树的一个项目/分支.

Each item its created dinamically and I would like remove an item/branch of the tree in each level.

问题是，当我选择和项目并且没有孩子时，我必须找到他的父母并删除所选项目.但是如果选定的项目有孩子，我必须找到他的父母，获取选定项目的所有孩子，更新孩子的所有 parentId，添加到父母并删除选定的项目.递归执行所有这些操作并返回更新后的数组.

The problem is that when I select and item and has not children I have to find his parent and remove selected item. But If selected item has children, I have to find his parent, get all children of selected item, update all parentId of children, added to parent and remove selected item. Do all of that recursively and return updated array.

const data = [
  {id: 1, title: 'foo', children: [
    {id: 11, parentId: 1, title: 'bar',},
    {id: 12, parentId: 1, title: 'baz', children: [
      {id: 121, parentId: 12, title: 'qux'},
      {id: 122, parentId: 12, title: 'quz'}
    ]},
    {id: 13, parentId: 1, title: 'corge'}
  ]},
  {id: 2, title: 'grault'}
];

const id = 12;
console.log (removeElement(data, id));

结果应该是:

const data = [
  {id: 1, title: 'foo', children: [
    {id: 11, parentId: 1, title: 'bar', children: [
      {id: 121, parentId: 11, title: 'qux'},
      {id: 122, parentId: 11, title: 'quz'}
    ]},
    {id: 13, parentId: 1, title: 'corge'}
  ]},
  {id: 2, title: 'grault'}
];

推荐答案

虽然这可以在单个函数中完成，但如果使用 相互递归.这里我们写了两个函数.一个从数组中删除元素，用它可能拥有的任何子元素替换它.另一个处理单个对象，从它(以及它的任何子对象)中删除 id.我们这里的主要函数是 removeElement，它会在我们的输入上调用 removeElementFromArray，如果初始数据是一个数组，如果初始数据是一个普通对象，则对任何子级调用它.

Although this can be done in a single function, it's a lot cleaner and less repetitive if you write this with mutual recursion. Here we write two functions. One removes the element from an array, replacing it with any children it might have. The other processes a single object, removing the id from it (and from any of its children.) Our main function here is removeElement, which will call removeElementFromArray on our input if the initial data is an array or call it against any children if the initial data is a plain object.

const removeElementFromArray = (arr, id) =>
  arr .flatMap (
    o => o.id === id
      ? [... (o .children || []).map (o => removeElement (o, id))]
      : [removeElement (o, id)]
  )

const removeElement = (obj, id) => 
  Array .isArray (obj)
    ? removeElementFromArray (obj, id)
    : {... obj, ... (obj .children ? {children: removeElementFromArray (obj .children, id)} : {}) }


const data = [
  {id: 1, title: 'foo', children: [
    {id: 11, title: 'bar'},
    {id: 12, title: 'baz', children: [
      {id: 121, title: 'qux'},
      {id: 122, title: 'quz'}
    ]},
    {id: 13, title: 'corge'}
  ]},
  {id: 2, title: 'grault'}
];

console .log (removeElement (data, 121)) // 121 removed
console .log (removeElement (data, 12))  // 12 removed; 121 and 122 moved to 1
console .log (removeElement (data, 1))   // 1 removed; 11, 12, 13 moved to root
console .log (removeElement (data, 42))  // No change

.as-console-wrapper {min-height: 100% !important; top: 0}

这篇关于从树中递归删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！