动态路由二级菜单 递归

动态路由二级菜单递归是指在前端应用中，根据特定的数据结构和逻辑来生成多层嵌套的菜单，并且能够自动适应菜单项的变化。下面是一个简单的示例：

假设有以下菜单数据结构：

const menuItems = [
  {
    id: 1,
    name: '菜单1',
    path: '/menu1',
    children: [
      {
        id: 11,
        name: '子菜单1-1',
        path: '/menu1/child1',
        children: []
      },
      {
        id: 12,
        name: '子菜单1-2',
        path: '/menu1/child2',
        children: []
      }
    ]
  },
  {
    id: 2,
    name: '菜单2',
    path: '/menu2',
    children: [
      {
        id: 21,
        name: '子菜单2-1',
        path: '/menu2/child1',
        children: []
      },
      {
        id: 22,
        name: '子菜单2-2',
        path: '/menu2/child2',
        children: [
          {
            id: 221,
            name: '子菜单2-2-1',
            path: '/menu2/child2/grandchild1',
            children: []
          }
        ]
      }
    ]
  }
];

我们可以使用递归函数来生成动态的二级菜单：

function generateMenu(menuItems) {
  return (
    <ul>
      {menuItems.map(menuItem => (
        <li key={menuItem.id}>
          <a href={menuItem.path}>{menuItem.name}</a>
          {menuItem.children.length > 0 && generateMenu(menuItem.children)}
        </li>
      ))}
    </ul>
  );
}

// 使用示例
const App = () => {
  return <div>{generateMenu(menuItems)}</div>;
};

这样就可以根据菜单数据结构动态生成多层嵌套的菜单。递归函数 `generateMenu` 在遍历每个菜单项时，如果该菜单项有子菜单，则会再次调用 `generateMenu` 函数来生成子菜单。这样逐层递归，直到遍历完所有的菜单项。