React - Tree-Komponente

Question

Ich versuche, eine Komponente in React zu erstellen, um die Namen in einer Datenstruktur rekursiv anzuzeigen. Ich bin nicht so vertraut mit React und bin mir nicht sicher, was ich in meinem Code tun kann, um den Fehler zu entfernen, den ich in der Konsole erhalte.

Der Fehler ist Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag

Hier ist ein jsFiddle zu meinem Code: https://jsfiddle.net/go79b0dp/ Hier ist mein Beispielcode:

var treeObj = [ 
    { 
    id: 1, 
    name: 'Bob', 
    children: [ 
     { 
     id: 2, 
     name: 'Mary', 
     children: [ 
      {id: 4, name: 'Suzy'} 
     ] 
     }, 
     { 
     id: 3, 
     name: 'Phil', 
     children: [ 
      {id: 5, name: 'Jon'}, 
      {id: 6, name: 'Paul'} 
     ] 
     } 
    ] 
    } 
]; 

var TreeView = React.createClass({ 
    getInitialState: function() { 
    return { 
     people: treeObj 
    }; 
    }, 

    render: function() { 
    var people = this.state.people; 
    var nodes = people.map((i) => <TreeNode node={i} children= {i.children} />) 

    return (
     <ul>{nodes}</ul> 
    ); 
    } 
}); 

var TreeNode = React.createClass({ 
    render: function() { 
    var nodes; 
    if (this.props.children) { 
     nodes = this.props.children.map((i) => <TreeNode node={i} children={i.children} />); 
    }   
    return (
     <li>{this.props.node.name}</li> 
     <ul>{nodes}</ul> 
    ); 
    } 
}); 

ReactDOM.render(<TreeView />, document.getElementById('container')); 

Answer 1

Ihre TreeNode Komponente gibt zwei Geschwister Komponenten: <li> und <ul>. Im Grunde versuchen Sie, zwei Dinge aus der render-Funktion zurückzugeben, und Sie können das nicht tun.

Normalerweise ist die empfohlene Lösung, beide in ein anderes Element zu verpacken. Zum Beispiel:

return (<div> 
    <li>{this.props.node.name}</li> 
    <ul>{nodes}</ul> 
</div>); 

jedoch für die Baumstruktur Sie versuchen zu schaffen, wäre es wahrscheinlich besser, die <ul> innerhalb der <li> zu setzen. Das wäre:

return (<li> 
    {this.props.node.name} 
    <ul>{nodes}</ul> 
</li>); 

Dies ist, wie geschachtelte Listen in HTML üblich sind.