前端 - 递归组件生成菜单中子组件直接接收路由规则的方法？

Question

向大家请教一个问题，在递归组件生成菜单中，网上的方法是下图中父组件接收路由数组然后传给子组件，之后由子组件递归；请问可以直接由子组件接受路由规则然后进行动态菜单生成吗，还请诸位解疑答惑，感谢

如果直接子组件接收路由数组，该怎么实现子菜单的生成

Answer 1

在递归组件生成菜单中，通常的做法是父组件接收路由数组然后传给子组件，由子组件递归生成菜单。但是，如果你想直接由子组件接收路由规则并动态生成菜单，也是可以实现的。

下面是一个简单的示例，展示如何在子组件中接收路由规则并生成子菜单：

// 子组件const SubMenu = ({ routes }) => {  const generateSubMenu = (routes) => {    return routes.map((route) => {      const { path, name } = route;      return (        <li key={path}>          <a href={path}>{name}</a>          {route.children && generateSubMenu(route.children)}        </li>      );    });  };  return <ul>{generateSubMenu(routes)}</ul>;};

在这个示例中，子组件SubMenu接收一个routes属性，它是一个包含路由规则的对象数组。在generateSubMenu函数中，我们通过遍历routes数组来生成子菜单的列表项。对于每个路由规则，我们提取出path和name属性，并创建一个链接。如果当前路由有子路由（即route.children存在），则递归调用generateSubMenu函数来生成子菜单。

你可以在父组件中使用这个子组件，并将路由规则作为属性传递给它，如下所示：

// 父组件const Menu = () => {  const routes = [    {      path: "/home",      name: "Home",    },    {      path: "/about",      name: "About",    },    {      path: "/contact",      name: "Contact",      children: [        {          path: "/contact/email",          name: "Email",        },        {          path: "/contact/phone",          name: "Phone",        },      ],    },  ];  return (    <ul>      {routes.map((route) => (        <li key={route.path}>          <a href={route.path}>{route.name}</a>          {route.children && <SubMenu routes={route.children} />}        </li>      ))}    </ul>  );};

在这个示例中，父组件Menu通过遍历路由数组来生成菜单的列表项。对于每个路由规则，我们创建一个链接，并在需要时递归地渲染子组件SubMenu，将子路由作为属性传递给它。这样，子组件可以直接接收路由规则并动态生成子菜单。