JavaScript：更新所有树项的最佳方式？

Question

我尝试在 React 中创建侧边栏组件，我有一个像下面这样的数据结构

const links = [
  {
    label: 'Item-1',
    url: '/item-1',
  },
  {
    label: 'Item-2',
    children: [
      {
        label: 'Item-2-1',
        url: '/item-2-1',
      },
      {
        label: 'Item-2-2',
        url: '/item-2-2',
      },
      {
        label: 'Item-2-3',
        url: '/item-2-3',
      },
    ],
  },
  {
    label: 'Item-3',
    children: [
      {
        label: 'Item-3-1',
        url: '/item-3-1',
      },
      {
        label: 'Item-3-2',
        url: '/item-3-2',
      },
    ],
  },
];

所以问题是假设用户更改了 URL 和类似 http://localhost:90/item-2-3 的 URL。

我需要从侧边栏激活这个侧边栏项目，它可以嵌套。因此，首先我需要停用所有其他侧边栏项目（我不希望侧边栏中有多个选定项目），然后激活选定的侧边栏项目。

因为（如果我是正确的）我需要更新所有树项假设我将 active:false 字段添加到所有 JSON，然后我需要从树中找到正确的树项（URL === item-2 -3）添加active:true并将所有父json更新为active:true（因为有看起来选择/打开）

所以我的问题是，如果我纠正了如何以最佳方式编写此代码，我是否正确？ ：/

实际上，我想创建一个函数，当像 selectItemFromTree(links, '/item-2-2') 那样调用这个函数时，我得到的结果如下所示。

   const links = [
  {
    label: 'Item-1',
    url: '/item-1',
    active: false
  },
  {
    label: 'Item-2',
    active: true,
    children: [
      {
        label: 'Item-2-1',
        url: '/item-2-1',
        active: false
      },
      {
        label: 'Item-2-2',
        url: '/item-2-2',
        active: true,
      },
      {
        label: 'Item-2-3',
        url: '/item-2-3',
        active: false
      },
    ],
  },
  {
    label: 'Item-3',
    active: false,
    children: [
      {
        label: 'Item-3-1',
        url: '/item-3-1',
        active: false
      },
      {
        label: 'Item-3-2',
        url: '/item-3-2',
        active: false
      },
    ],
  },
];

Answer 1

您必须递归遍历树并更新所有活动状态。

const links=[{label:"Item-1",url:"/item-1"},{label:"Item-2",children:[{label:"Item-2-1",url:"/item-2-1"},{label:"Item-2-2",url:"/item-2-2"},{label:"Item-2-3",url:"/item-2-3"}]},{label:"Item-3",children:[{label:"Item-3-1",url:"/item-3-1"},{label:"Item-3-2",url:"/item-3-2"}]}];


const updateActiveLink = (links, url, parent = null) => {
   for (link of links) {
      link.active = false;
      if (link?.children) {
          updateActiveLink(link.children, url, link)
      }
      if (link.url === url) {
          link.active = true;
          if (!!parent) parent.active = true;
      }
   }
}

updateActiveLink(links, '/item-2-3');
          
console.log(links);

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

注意此方法会改变链接数组。