如何通过索引路径通用化更新树形节点toggle并置非路径节点为false？

需求核心 #

需要实现两个关键功能：

• 适配任意层级的树形结构，通过索引路径精准定位节点并将其toggle设为true
• 将所有不在索引路径中的节点toggle统一置为false

实现思路 #

1. 全局重置所有节点状态：用递归遍历整个树形结构，不管层级深度如何，都能覆盖所有节点的toggle重置
2. 动态定位目标节点：通过循环逐层解析索引路径，避免硬编码层级判断，适配任意长度的索引路径

完整代码实现 #

const treeData = [{
    name: 'Infiniti',
    toggle: false,
    children: [{
        name: 'G50',
        toggle: false,
        children: [{
            name: 'Pure AWD',
            toggle: false
          },
          {
            name: 'Luxe',
            toggle: false
          },
        ],
      },
      {
        name: 'QX50',
        toggle: false,
        children: [{
            name: 'Pure AWD',
            toggle: false
          },
          {
            name: 'Luxe',
            toggle: false
          },
        ],
      },
    ],
  },
  {
    name: 'BMW',
    toggle: false,
    children: [{
        name: '2 Series',
        toggle: false,
        children: [{
            name: 'Coupé',
            toggle: false
          },
          {
            name: 'Gran Coupé',
            toggle: false
          },
        ],
      },
      {
        name: '3 Series',
        toggle: false,
        children: [{
            name: 'Sedan',
            toggle: false
          },
          {
            name: 'PHEV',
            toggle: false
          },
        ],
      },
    ],
  },
];

const indexPathArray = ["0/0/1", "1/0/0"];

// 递归重置所有节点的toggle为false
function resetAllToggle(nodes) {
  nodes.forEach(node => {
    node.toggle = false;
    if (node.children?.length) {
      resetAllToggle(node.children);
    }
  });
}

// 根据索引路径设置目标节点的toggle为true
function setToggleByIndexPath(nodes, indexPath) {
  let currentLayer = nodes;
  const indexes = indexPath.split('/').map(Number);
  
  indexes.forEach((idx, i) => {
    const targetNode = currentLayer[idx];
    targetNode.toggle = true;
    // 未到最后一层时，切换到子节点层继续遍历
    if (i < indexes.length - 1) {
      currentLayer = targetNode.children;
    }
  });
}

// 执行逻辑：先全局重置，再批量设置目标节点
resetAllToggle(treeData);
indexPathArray.forEach(path => setToggleByIndexPath(treeData, path));

console.log(treeData);

代码说明 #

• resetAllToggle函数：递归遍历所有节点，自动处理任意层级的子节点，确保所有节点初始状态为false
• setToggleByIndexPath函数：将索引路径拆分为数字数组，通过循环逐层定位节点，每一步都标记当前节点为true，完全适配任意长度的索引路径
• 执行顺序：必须先执行全局重置，再设置目标节点，保证不在路径中的节点状态统一为false

内容的提问来源于stack exchange，提问作者Jason22