Рендеринг компонентов из массива объекта

Question

У меня есть массив объектов, содержащий другой массив объектов, подобный этому:

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

Затем я передаю его в качестве реквизита компоненту и сопоставляю реквизит для отображения в React компонента первого уровня «Commons» с этим в другом блоке:

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

Я использую Reach Router для React, и теперь я пытаюсь визуализировать компонент второго уровня в подчиненных маршрутах, используя вторую функцию карты прямо под первым <route.component path={route.path} key={index} />

Но я не могу заставить его работать так {route.subroutes.map(...)}, чтобы отобразить компонент CommonsDoc во втором массиве моего объекта

Answer 1

Чтобы создать динамическое имя тега в JSX, вам нужно присвоить значение имени заглавной переменной

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

, и вы должны сделать то же самое для подстрок

Answer 2

Как-то так должно вам помочь:

const composeRoutes = (routes) => {
    allRoutes = routes.map((route, index) => {
        if (route.subroutes.length > 0) {
            let withSubRoutes = [];
            withSubRoutes = composeRoutes(route.subroutes);
            withSubRoutes.append(<route.component path={route.path} key={index} />);
            return withSubRoutes;
        }
        return <route.component path={route.path} key={index} />;
    })
    return _.flatten(allRoutes);
};
<StyledRouter>
    {composeRoutes(routes)}
</StyledRouter>

Answer 3

Если я правильно понял вопрос, вы должны отобразить его так:

routes.map(route => route.subroutes).map(subroute => 'do whatever you want with each subroute')