javascript - 从对象数组渲染组件

Question

我有一个对象数组，其中包含另一个对象数组，如下所示:

[{label: "Commons",
  path: "commons",
  component: Commons,
  subroutes: [
  {
    label: "Commons doc",
    path: "commons/doc",
    component: CommonsDoc,
  }]
 }]

然后我将其作为组件传递给组件，并将该组件映射到 React 中渲染第一级组件“Commons”，并将其放在另一个 block 中:

<StyledRouter>
    {routes.map((route, index) => (
        <route.component path={route.path} key={index} />
    ))}
</StyledRouter>

我正在使用 Reach Router for React，现在我尝试在第一个 <route.component path={route.path} key={index} /> 下使用第二个 map 函数在子路线上渲染第二级组件。

但我无法让它像这样工作 {route.subroutes.map(...)}渲染 CommonsDoc我的第二个对象数组中的组件

Answer 1

如果我答对了问题，你应该这样映射:

routes.map(route => route.subroutes).map(subroute => '对每个子路由做任何你想做的事情')