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

Question

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

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

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

到目前为止，我能做的最好的事情就是从下往上工作，找到底层的 JSON 节点，将它们插入数组，创建父组件，将我之前创建的数组分配为 parent 等例如

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 用户界面中 <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;