动态 React 元素创建的问题

Question

免责声明...这可能会变成更多特定的 js 问题（与使用变量动态访问对象属性有关）...

我正在尝试创建一个动态呈现的菜单，其中传递了一个菜单架构（testinputs），并且该菜单通过路由呈现完整。

这有两个部分：

1. 渲染菜单本身

2. 出租路线

这个问题是关于渲染路线的。

import DataGrid from "./DataGrid.js"
import AddItem from "./AddItem.js"

const AllMenuItems = {
  "DataGrid":DataGrid
  "AddItem":AddItem,
}

const testinput = {
  data: [
    {
      name: "DataGrid",
      url: "/datagrid",
    },
    {
      name: "Transact",
      children: [
        {
          name: "AddItem",
          url: "/additem",
        },
      ],
    },
  ],
};

我有一个函数表达式，它利用 jsx 返回特定的动态路由...

当我像这样对组件属性进行硬编码时，渲染工作正常，直接引用导入的 React 组件...

<Route path={url} component={AddItem}/>

但是当我尝试动态地做事情时（见下文），路由不起作用。

const routeBuilder = (children) => {
    return children.map((subOption) => {
      if (!subOption.children) {
        var name = subOption.name;
        var url = subOption[url];
        var MyComponent = AllMenuItems[name];    
        return (
          <Route path={url} component={MyComponent}/>
        );
      }
      routeBuilder(subOption.children);
    })
  }

我在这里忽略了什么？提前致谢。

Answer 1

一个问题是没有使用递归routeBuilder 返回值。

类似的东西

const routeBuilder = (children) => {
    return children.map((subOption) => {
      if (!subOption.children) {
        var name = subOption.name;
        var url = subOption[url];
        var MyComponent = AllMenuItems[name];    
        return (
          <Route path={url} component={MyComponent}/>
        );
      } else {
         return routeBuilder(subOption.children);
        }
    })
  }