REACT：再帰の助けを借りたJSONツリー

Question

JSONバックエンドの人は私に複数の親子を提供していますので、親子を示すために動的ループを入れなければなりません。

JSON

"data": [ 
    { 
    "id": 25, 
    "slug": "mobiles", 
    "parent_id": null, 
    "name": "Mobiles" 
    }, 
    { 
    "id": 26, 
    "slug": "mobile-phones-accessories", 
    "parent_id": 25, 
    "name": "Mobile Phones accessories" 
    }, 
    { 
    "id": 27, 
    "slug": "computer-laptop", 
    "parent_id": null, 
    "name": "Computer & Laptop" 
    }, 
    { 
    "id": 28, 
    "slug": "laptops", 
    "parent_id": 27, 
    "name": "Laptops" 
    }, 
    { 
    "id": 29, 
    "slug": "mobile-phones", 
    "parent_id": 26, 
    "name": "Mobiles Phone" 
    } 
] 

My機能（親切にこれを無視する。それはちょうど試みだが、私は1つの親を持っている）

renderCategoriesHtml() { 
    const { categories } = this.props; 

    if (!categories) return false; 

    const nullCat = []; 
    categories.map((obj) => { 
    if (obj.parent_id == null) { 
     nullCat.push(obj); 
    } 
    }); 

    return nullCat.map(
    (parentCat, i) => (
     <div className="form-group" key={i}> 
     <div className="checkbox" key={i}> 
      <label> 
      <Field 
       name={`categories.${parentCat.id}`} 
       component="input" 
       type="checkbox" 
      /> 
      {parentCat.slug} 
      </label> 
     </div> 
     { 
      categories.map(
      (childCat, j) => (
       parentCat.id == childCat.parent_id ? 
       <div className="checkbox ml-20" key={j}> 
        <label> 
        <Field 
         name={`categories.${childCat.id}`} 
         component="input" 
         type="checkbox" 
        /> 
        {childCat.slug} 
        </label> 
       </div> 
       : '' 
      ) 
     ) 
     } 
     </div> 
    ) 
); 
} 

私はこの（そのダイナミックHTMLたいです私は欲しい）

<ul> 
    <li>mobiles</li> 
    <ul> 
     <li>mobile-phones-accessories</li> 
     <ul> 
      <li>mobile-phones</li> 
     </ul> 
    </ul>    
    <li>computer-laptop</li> 
    <ul> 
     <li>laptops</li> 
    </ul>  
</ul> 

Answer 1

これを試してみてください：

class TreeRender extends React.Component { 
    state = { 
    data: JSON.parse('[{"id": 25,"slug": "mobiles","parent_id": null,"name": "Mobiles"},{"id": 26,"slug": "mobile-phones-accessories","parent_id": 25,"name": "Mobile Phones accessories"},{"id": 27,"slug": "computer-laptop","parent_id": null,"name": "Computer & Laptop"},{"id": 28,"slug": "laptops","parent_id": 27,"name": "Laptops"},{"id": 29,"slug": "mobile-phones","parent_id": 26,"name": "Mobiles Phone"}]') 
    } 
    getCurrent = (node) => this.state.data.filter(cNode => cNode.parent_id == node).map(cNode => (
    <ul key={`node_${cNode.id}`}> 
     <li>{cNode.name}</li> 
     {this.getCurrent(cNode.id)} 
    </ul> 
)) 

    render() { 
    return (
     <div> 
     {this.getCurrent(null)} 
     </div> 
    ); 
    } 
} 

FIDDLE