React Rendering verschachtelte json

Question

Ich habe einige Json wie dieses

[ 
    { 
    "name": "Hello Kitty", 
    "items": [ 
     { 
     "name": "Kitty Muu Muu" 
     }, 
     { 
     "name": "Kitty smack" 
     } 
    ] 
    }, 
    { 
    "name": "Hello Pussy", 
    "items": [ 
      { 
     "name": "World", 
     "items": [ 
      { 
      "name": "Hello Pussy world" 
      } 
     ] 
     } 
    ] 
    } 
] 

sucht es JSON verschachtelt ist und meine Frage ist; Wo sollte die Rekursivität behandelt werden, um dies zu rendern?

Ich habe 2 Komponenten List-Komponente, die die Daten und Beiträge Datenänderungen an den Server zurück

Artikel Komponente aufruft, die ein einzelnes Element macht

Soll ich dies auf der Liste Ebene oder auf Positionsebene behandeln?

Der Artikel macht ein Eingabefeld, das Sie aktualisieren können, und dies sollte möglich sein, sowohl bei Eltern und Kind Ebene

Answer 1

können Sie Item verwenden Kind Elemente anzuzeigen (in React Sie es mit children Eigenschaft tun können), werden jedoch Hauptarbeit in List sein, zum Beispiel

class Item extends React.Component { 
    render() { 
    return <li> 
     { this.props.name } 
     { this.props.children } 
    </li> 
    } 
} 

class List extends React.Component { 
    constructor() { 
    super(); 
    } 

    list(data) { 
    const children = (items) => { 
     if (items) { 
     return <ul>{ this.list(items) }</ul> 
     } 
    } 

    return data.map((node, index) => { 
     return <Item key={ node.id } name={ node.name }> 
     { children(node.items) } 
     </Item> 
    }); 
    } 

    render() { 
    return <ul> 
     { this.list(this.props.data) } 
    </ul> 
    } 
} 

Example

Answer 2

Ich würde es in List-Komponente tun. Wenn Ihre List-Komponente groß ist, würde ich sie in eine andere Hilfsdatei einfügen, um sie zu benötigen.