react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单

1.问题

默认的如果没有你的菜单结构是这样的:

[
	{
	children: [
		{
			name: "通用配置"
			parentId: "1744857774620672"
			path: "basic"
		}
	],
	name: "系统管理"
	parentId: "-1"
	path: "system"
	}
]

可以看到每层菜单的path都只有当前的路径,没有进行全拼接。
那么此时点击一级菜单就会有问题:
react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单_第1张图片

2.解决

让一级菜单进行全拼接,二三级等子菜单不做处理,仍然保持当前的path,也就是点击一级菜单自动打开它下面最深的第一个子菜单。

/**
 * @description: 递归 设置一个父亲菜单完整的菜单路径,
 * 例如:[{path:home,children;[{path:console}]}]
 * 得到:[{path:home/console,children;[{path:console}]}]
 * @param menuData 递归的对象
 * @param parentPath 父路径
 * @returns 替换后的对象
 */
export const setParentPaths = (data) => {
  if (data.length === 0) return;
  data.forEach((i) => {
    const concatPaths = (item, parentPath = "") => {
      const currentPath = parentPath + "/" + (item.path || item.fullPath);

      if (item.children && item.children.length > 0) {
        item.fullPath = concatPaths(item.children[0], currentPath);
      } else {
        item.fullPath = currentPath;
      }

      return item.fullPath;
    };

    concatPaths(i);
  });

  return data;
};

react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单_第2张图片

你可能感兴趣的:(react,问题,业务,react.js,javascript,ecmascript)