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 和 URL 类似的内容 http://localhost:90/item-2-3.

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

因为（如果我是正确的）我需要更新所有树项假设我将 active:false 字段添加到所有 JSON 然后我需要从树中找到正确的树项(URL === item-2-3) 添加 active:true 并将所有父级 json 更新为 active:true （因为有 look selected/opened）

所以我的问题是我是否正确，如果我正确如何编写这段代码的最佳方式？ :/

实际上，我想创建一个函数，当这样调用这个函数时 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}

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

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

JavaScript: Best way for update all tree items?

javascript

tree

reactjs