再帰的レンダリングコンポーネント

Question

Reactを使用して再帰的リストをレンダリングするにはどうすればよいですか？

{ 
    "list": [ 
     "Parent", 
     "subList": [ 
      { 
       "First Child", 
       "subList": [ 
        { 
         "Grand Child 1-1" 
        }, 
        { 
         "Grand Child 1-2" 
        } 
       ] 
      }, 
      { 
       "Second Child", 
       "subList": [ 
        { 
         "Grand Child 2-1", 
         "sublist": [] 
        } 
       ] 
      } 
     ] 
    ] 
} 

インデントされたサブリストをレンダリングするには、どのように再帰的なマップ関数を記述しますか？以下は私の試みですが、私はそれを再帰的に作りたいと思います。

renderCheckboxRows = (list) => { 
    list.map((filter, index) => { 

     let content = <FilterRow key={index} {...filter} />; 
     let subListContent = []; 

     if (filter.subList && filter.subList.length > 0) { 
      filter.subList.map((filter, index) => { 
       subListContent.push(<FilterRow key={index} {...filter} />); 
      }); 
     } 
     return (content + subListContent); 
    }); 

} 

Answer 1

私は通常、そのための専用コンポーネントを導入しています。

名前はNodeです。次のようにその使用法は次のようになります。そして、

<Node caption={root.caption} children={root.children}/> 

Node.render内側：

render() 
{ 
    var children = []; 

    children = this.props.children.map((c) => 
    { 
     return <Node caption={c.caption} children={c.children}> 
    }); 

    return (
     <div> 
      <div>{this.props.caption}</div> 
      {children} 
     </div> 
    ); 
} 

これは単なるドラフトたとえば、代わりにあなたがあなた自身のコンポーネントを持つことになりますdivsのですが、それは考えを示しています。