Reactを使用したネストされたリスト

Question

別の入力データを使用して別のdiv'sでネストされたリストを作成しようとしています。入れ子リストの印刷に問題があります：List 2ここにあります。私はnameオブジェクトの属性を印刷し、childNodesがあるかどうかを確認します。nameという属性も入れ子になっています。ここにはParentクラスがあります。

export default class Parent extends Component { 
    render() { 
    return (

    <div> 
     <h4>List 1</h4> 
     <ul> 
     {this.props.jsonData1.map(item => { 
      return <Child name={item.name}/> 
     })} 
     </ul> 
    </div> 

    <div> 
     <h4>List 2</h4> 
     <ul> 
     {this.props.jsonData2.map(item1 => { 
      return <Child name={item1.name}/> 
     if(item1.childNodes){ 
      <ul> 
      {item1.jsonData2.map(item2=>{ 
      return <Child name={item2.name}/> 
      })} 
     }</ul> 
     })} 
     </ul> 
    </div> 
    ); 
    } 
} 

私のChildクラスはかなりシンプルです。単一のリスト要素だけを返します。

export default class Child extends Component { 
    render() { 
    let {name}=this.props; 
    return (
     <li>{name}</li> 
    ); 
    } 
} 

私がここで間違っていることについてのガイダンスを読んでいただきたいと思います。私は可能な限りシンプルな再帰を維持しようとしていますが、明らかに間違っています。

Answer 1

コードを見ているだけのことがいくつかあります。

export default class Parent extends Component { 
    render() { 
     return(
     <div> 
      //other code 
     </div> 
    ); 
    } 
} 

Answer 2

あなたはほとんどそこにいる、多分これは右のトラックにあなたをご案内します：あなたの親クラスと引き換えに、あなたは1つのdivですべてをカプセル化していることを確認します。再帰的に何かをしたいときはいつでも、私たちが基本関数を呼び出さないようにするための基本的な事例を知りたい。だから私の小さな事例では、あなたが持っているものを使っています。

export default class Child extends Component { 
    render() { 
    let {name}=this.props; 
    return (
     <li>{name}</li> 
    ); 
    } 
} 

当社のベースケースはchild.childNodesが存在する場合、我々は新しい<ul>要素のリストを作成したいです。しかし、存在しないがアイテムが存在する場合は、<li>をレンダリングするだけです。これはもはや子ノードまたはアイテムがなくなるまで続行します。

export default class Parent extends Component { 
    renderChild = (child) => { 
    if (child.childNodes) { 
     return (
     <ul> 
      {child.jsonData.map(item => { 
      return this.renderChild(item); 
      })} 
     </ul> 
    ); 
    } 
    else if (child.name) { 
    return <Child name={child.name}/>; 
    } 
    return null; 
    } 

    render() { 
    return (
    <div> 
     <h4>Nested Lists</h4> 
     <ul> 
     {this.renderChild(this.props.jsonData)} 
     </ul> 
    </div> 
); 
}