ReactJs - SyntaxError: Embedded: Nicht abgeschlossene JSX-Inhalte

Question

Ich bin neu bei ReactJs und ich habe ein dummes Problem, denke ich, aber ich sehe keinen Grund dafür. Meine Ausbildung Code:

var ListComponent = React.createClass({ 
    render: function() { 
     return (
      <li>{this.props.value}</li> 
     ); 
    } 
}); 

var TodoComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      listPoints: [] 
     } 
    }, 
    addListPoint: function(event) { 
     if (event.target.value !== '') { 
      this.setState({ 
       listPoints: this.state.listPoints.push(event.target.value) 
      }); 
     } 
    }, 
    render: function() { 
     var listPoints = []; 
     for (var i=0; i<this.state.listPoints.length; i++) { 
      listPoints.push(
       <ListComponent>{this.state.listPoints[i]}<ListComponent/> 
      ); 
     } 
     return (
      <ul>{listPoints}</ul> 
      <input type="text" onBlur={this.addListPoint}/> 
     ); 
    }, 
}); 


React.render(
    <TodoComponent />, 
    document.getElementById('container') 
); 

Und meine Zurückverfolgungs:

Uncaught SyntaxError: embedded: Unterminated JSX contents (42:21) 
    40 | 
    41 | React.render(
> 42 |  <TodoComponent />, 
    |     ^
    43 |  document.getElementById('container') 
    44 |); 
    45 | 

Jeder Tag geschlossen zu sein scheint. Bringt mich jemand zu einem Ort, an dem das Problem begann?

Answer 1

Sie schließen nicht Ihre Liste richtig:

<ListComponent>{this.state.listPoints[i]}</ListComponent> 

Sie <ListComponent/> schrieb (ein selbstschließenden Tag ohne Inhalt)

Darüber hinaus müssen Sie, was zu tun Kohei TAKATA sagt - Render sollte ein Wurzelelement haben (obwohl in React 16+ können Sie ein Array zurückgeben oder Ihre Elemente in <React.Fragment> umhüllen).

Answer 2

Ihre render Funktion von TodoComponent gibt 2 Elemente zurück. Ich denke, es muss ein Element sein. Bitte versuchen Sie die 2 Elemente durch <div> oder etwas zu schließen. So:

<div> 
    <ul>{listPoints}</ul> 
    <input type="text" onBlur={this.addListPoint}/> 
</div>