ネストされた反応リストが機能しない

Question

Reactを使用してJSONデータをネストされたリストに再帰的にレンダリングしようとしています。このクラスを使用して

[{"id": "1", 
"name": "Luke" 
}, 
{"id": "2", 
"name": "Jim", 
    "childNodes":[{ 
    "id": "3", 
    "name": "Lola" 
    }] 
}] 

を：：

リスト要素を作成し、子クラスを呼び出す

export default class NestedList extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     visible: true 
    }; 
    } 

    toggle =() => { 
    this.setState({ visible: !this.state.visible }); 
    }; 

    renderChild = (child) => { 
    if (child.childNodes) { 
     return (
     <ul> 
      {child.myData.map(item => { 
      return this.renderChild(item); 
      })} 
     </ul> 
    ); 
    } 
    else if (child.name) { 
     return <input type="checkbox"><Child name={child.name}/></input>; 
    } 
    return null; 
    } 


    render() { 
    return (
     <aside> 
     <div> 
      <h4>Data Sets</h4> 
      <ul> 
      {this.renderChild(this.props.myData)} 
      </ul> 
     </div> 
     </aside> 
    ); 
    } 
} 

：今私はこのような単純なデータオブジェクトを使用しています

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

が、それはdoesnの何も印刷しない。属性childNodesを完全に削除しようとしましたが、リストを印刷しようとしましたが、まだ動作しません。私はどこが間違っているのか分かりません。私はこれを解決する方法に関するいくつかの助けに感謝します。

Answer 1

問題のカップルがここにありました：

1. あなたはmyDataをに渡しましたは、childNodes プロパティもnameプロパティも保持しません。したがって、いずれの条件も満たされていない （nullが返されました）。
   myDataと をループして、配列の各メンバーをrenderChildに渡す必要があります。

2. 私たちは、この条件内renderChild方法、 に有効な「子」を渡します場合でも：

   if (child.childNodes) { 
   

   再び

   間違ったプロパティを使用している：

   <ul> 
       {child.myData.map(item => { 
       return this.renderChild(item); 
       })} 
   </ul> 
   

   これは次のようになります。

   {child.childNodes.map(item => {... 
   

3. 最後に、要素はinput要素の中にあります。 レイアウトを変更してください。 `プロパティ 'のchildNodes' を読み取ることができません：

   <input type="checkbox"/> 
       <Child name={child.name} /> 
   

ここ

はあなたのコードを実行している例です。

const data = [ 
 
    { 
 
    id: "1", 
 
    name: "Luke" 
 
    }, 
 
    { 
 
    id: "2", 
 
    name: "Jim", 
 
    childNodes: [ 
 
     { 
 
     id: "3", 
 
     name: "Lola" 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 
class NestedList extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     visible: true 
 
    }; 
 
    } 
 

 
    toggle =() => { 
 
    this.setState({ visible: !this.state.visible }); 
 
    }; 
 

 
    renderChild = child => { 
 
    if (child.childNodes) { 
 
     return (
 
     <ul> 
 
      {child.childNodes.map(item => { 
 
      return this.renderChild(item); 
 
      })} 
 
     </ul> 
 
    ); 
 
    } else if (child.name) { 
 
     return (
 
     <div> 
 
      <input type="checkbox"/> 
 
      <Child name={child.name} /> 
 
     </div> 
 
    ); 
 
    } 
 
    return null; 
 
    }; 
 

 
    render() { 
 
    return (
 
     <aside> 
 
     <div> 
 
      <h4>Data Sets</h4> 
 
      <ul>{this.props.myData.map(item => this.renderChild(item))}</ul> 
 
     </div> 
 
     </aside> 
 
    ); 
 
    } 
 
} 
 

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

 
ReactDOM.render(<NestedList myData={data} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

レンダリングプロセスが開始されますので、あなたが最初のmyDataを通じてマッピングする必要があります。また

<ul> 
    {this.props.myData.map(data => this.renderChild(data))} 
</ul> 

、あなたがchild.childNodesをループするために必要childNodes上：

if (child.childNodes) { 
    return (
    <ul> 
     {child.childNodes.map(node => this.renderChild(node))} 
    </ul> 
); 
}