JSONデータからのList内の動的なネストされたアイテム

Question

'material-ui/List'の{List、ListItem、MakeSelectable}を使用してReact.js内にノードツリーを構築しています。私は結局、内部Webサービス呼び出しから来るJSONデータを結びつけます。私は、問題宣言ネストされたリストを作成する何を持っていない：

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

私は何をしたいことは、プログラムある JSONデータから、この入れ子構造を作成します。個別の<ListItem>コンポーネントをインスタンス化し、それらをレンダリングする配列にプッシュするのは簡単ですが、ノード構造にネストされた項目をすぐに取得するのに問題があります。

私がこれまで行うことができました最高の子供としての私の以前に作成された配列を割り当て、親コンポーネントを作成し、配列にそれらを押して、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} /> 
] 

これは少し面倒です。入れ子にされた子を持つ親をマテリアルにマップするより優雅な方法がありますか？<List>？

Answer 1

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

は、今、私たちは自分自身を再帰的に呼び出しますツリーノードを作成する必要があります...私たちは次のようなオブジェクトを持っていることを想像し最後に：

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

export default DynamicNestedItems; 

Answer 2

私は非常に同じ問題を抱えていましたが、唯一の違いはJSONの代わりにXMLで記述されたメニュー階層があることです。

私はあなたが<ConfigurationNav nav={this.state.nav}/>でインスタンス化することができ主成分ConfigurationNav作成：次にListItem Sを作成しサブコンポーネントがある

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> 
    ); 
    } 
}); 

を：

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} 
      /> 
    ); 
    } 
}); 

このアプローチは、何らかの形で私のために動作しますが、私はネストされたアイテムのインデントを失って、まだそれに取り組んでいました。

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

：

ルカ