来自 JSON 数据的列表中的 material-ui 动态嵌套项

Question

我正在使用来自“material-ui/List”的 { List, ListItem, MakeSelectable} 在 React.js 中构建节点树。我最终将连接来自内部 Web 服务调用的 JSON 数据。我以声明方式创建嵌套列表没有问题：

<List>
...
<ListItem
    ...
    nestedItems={[
      <ListItem
        ...

我想要做的是从 JSON 数据以编程方式创建这个嵌套结构。实例化单个<ListItem>组件并将它们.push 到一个数组中进行渲染很容易，但是我无法将嵌套的项目动态地放入节点结构中。

到目前为止我能做的最好的事情是自下而上工作，找到底层的 JSON 节点，将它们推入一个数组，创建父组件，将我之前创建的数组分配为父级的子级，等等，例如

var Children = [
   <ListItem key={1} primaryText='Child 1' />
   <ListItem key={2} primaryText='Child 2' />
]

然后...

var Parents = [
   <ListItem key={0} primaryText='Parent 1' nestedItems={Children} />
]

这有点麻烦；有没有更优雅的方法将具有嵌套子级的父级映射到 material-ui 中<List>？

Answer 1

想象一下，我们有一个类似于以下的对象.​​.....

RootObject = {
  children: [
    {
      children: [
        {
          children: [ {...props}, {...props}]
        },
        ...props,
      ]
    },
    {
      children: [...],
    },
    ...
    {
      children: [],
    },
  ],
  ...props,
}

现在我们需要创建一个递归调用自身的树节点：

const mapStructure = (nodes) => {
  if (nodes) {
    return nodes.map(node => (
      <ListItem
        key={node.id}
        primaryText={node.primaryText}
        initiallyOpen //optional
        nestedItems={mapStructure(node.children)}
      />
    ));
  }
};

最后：

const DynamicNestedItems = ({ RootObject }) => {
  return (
    <List>
      {mapStructure(RootObject)}
    </List>
  );
};

export default DynamicNestedItems;