material-ui 列表中的动态 nestedItems 来自 JSON 数据

Question

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

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

我想要做的是以编程方式从JSON数据创建这个嵌套结构。实例化单个 <ListItem> 组件并将它们推送到数组中进行渲染非常容易，但我无法即时将嵌套项放入节点结构中。

到目前为止我能做的最好的事情是从下往上工作，找到 JSON 个节点的底层，将它们推入一个数组，创建 parent 组件，将我的 previously-created 数组分配为 parent 的 children，等等。例如

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

然后...

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

这个有点麻烦；有没有更优雅的方式将嵌套 children 的 parent 映射到 material-ui <List>？

Answer 1

我遇到了同样的问题，唯一的区别是我有一个 XML 中描述的菜单层次结构而不是 JSON。

我创建了一个主要组件 ConfigurationNav，您可以使用 <ConfigurationNav nav={this.state.nav}/>:

对其进行实例化

var ConfigurationNav = React.createClass({
  render: function() {
    var items = [];
    var _this = this;
    this.props.nav.find('> navitem').each(function(i) {
      items.push(<ConfigurationNavItem item={this} />);
    });

    return (
      <List>
        {items}
      </List>
    );
  }
});

然后有一个子组件创建 ListItems:

var ConfigurationNavItem = React.createClass({
  render: function() {
    var nested = [];
    for (var i=0; i<this.props.item.children.length; i++) {
      nested.push(<ConfigurationNavItem item={this.props.item.children[i]} />);
    }

    return (
      <ListItem key={this.props.item.id}
          primaryText={this.props.item.getAttribute('label')}
          nestedItems={nested}
          />
    );
  }
});

这种方法对我有用，但不知何故我失去了嵌套项目的缩进，仍在努力。

卢卡

Answer 2

假设我们有一个类似于下面的对象...

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;

material-ui 列表中的动态 nestedItems 来自 JSON 数据

material-ui dynamic nestedItems in List from JSON data

list

reactjs

listitem

material-ui