如何实现树形数组递归函数：修改父文件夹权限同步更新所有子文件夹权限

现有代码问题 #

• 字段名不统一：示例结构主键为folderId，原有代码混用id和folderId会导致匹配失败
• 权限逻辑错误：(hasPermission === false && true) || false永远返回false，无法动态同步父级的最新权限
• 缺少必要参数：changeChildrenPermission没有接收要同步的权限值参数，无法将父级变更的权限传递给子级
• 递归逻辑缺失：setPermissionChange没有递归遍历深层子节点，无法匹配到嵌套层级的文件夹，也没有返回处理后的新树结构

完整实现代码 #

// 同步指定文件夹所有后代的权限
const changeChildrenPermission = (children, newPermission) => {
  return children.map(item => ({
    ...item,
    hasPermission: newPermission,
    // 递归处理所有深层子节点
    children: changeChildrenPermission(item.children, newPermission)
  }))
}

// 匹配指定folderId，更新自身及所有子级权限
const setPermissionChange = (folders, selectedId, newPermission) => {
  return folders.map(folder => {
    // 匹配到目标文件夹
    if (folder.folderId === selectedId) {
      return {
        ...folder,
        hasPermission: newPermission,
        // 同步所有子级权限
        children: changeChildrenPermission(folder.children, newPermission)
      }
    }
    // 未匹配到则递归处理当前文件夹的子节点
    return {
      ...folder,
      children: setPermissionChange(folder.children, selectedId, newPermission)
    }
  })
}

使用示例 #

const example = [
  {
    folderId: '1',
    hasPermission: false,
    children: [
      {
        folderId: '2.1',
        hasPermission: false,
        children: [
          {
            folderId: '3.1',
            hasPermission: false,
            children: [],
          },
        ],
      },
      {
        folderId: '2.2',
        hasPermission: false,
        children: [],
      },
    ],
  },
];

// 将folderId为'2.1'的权限设置为true
const processedTree = setPermissionChange(example, '2.1', true)

处理后的结果符合需求：

• folderId=1、folderId=2.2的权限保持原false不变
• folderId=2.1、folderId=3.1的权限更新为true

如果需要实现点击切换权限的效果，先查询目标节点的当前权限取反后作为newPermission传入即可。

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