Invariante Verletzung in React Render ODER die richtige Art und Weise zu iterieren und in React

Question

Ich bin in persistent Probleme in meinem React Rendern.

Dieser Code

/** @jsx React.DOM */ 
var AnswerRows = React.createClass({ 
    componentDidMount: function() { 
    }, 
    render: function() { 
    {this.props.answers.map(function(answer, i) { 
     return (
     <div id="answerRow"> 
      <label className="AnswerText"> 
      <input type="checkbox" value={answer.id} /> 
      {answer.text} 
      </label> 
     </div> 
    ); 
    }, this)} 
    } 
}); 

var QuizTaking = React.createClass({ 
    componentDidMount: function() { 
    }, 
    render: function() { 
    return (
     <div className="card-holder"> 
     <div className="showQuestionCard x-card host"> 
      <h3 dangerouslySetInnerHTML={{__html: this.props.question.text}}></h3> 
      <div className="answerRows"> 
      <AnswerRows answers={this.props.question.answers}/> 
      </div> 
      <div className='submitAnswers'></div> 
     </div> 
     <div className="paper-shadow-bottom"></div> 
     </div> 
    ) 
    } 
}) 

gibt mir Invariant Violation: AnswerRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. Fehler. Allerdings funktioniert dies jedes Mal: ​​

/** @jsx React.DOM */ 

var TestIndex = React.createClass({ 

    propTypes: { 
    }, 
    loadTest: function(i) { 
    window.location.replace(this.props.tests[i].url.replace(".json", "/take")) 
    }, 

    render: function() { 
    return(
     <div className="testTable card-holder"> 
     <div className="card-contents"> 
      {this.props.tests.map(function(test, i) { 
      return (
       <div className="testTableRow x-card host" key={test.id}> 
       <label className="__TITLE">{test.title} 
        <button onClick={this.loadTest.bind(test, i)} key={i} type="button" className="StartButton paper-button raisedButton">Start this test</button> 
       </label> 
       <div className="paper-shadow-bottom"></div> 
       </div> 
      ); 
      }, this)} 
     </div> 
     </div> 
    ) 
    } 
}); 

ich wirklich verstehen möchte, was hier vor sich geht, und vielleicht auch die ‚richtigen‘ Weg, es zu tun.

Answer 1

Sie können nicht mehrere Elemente (wie das von der Map-Funktion zurückgegebene Array) von der Renderfunktion zurückgeben. Außerdem fehlt eine Rückgabeanweisung. Versuchen Sie dies:

var AnswerRows = React.createClass({ 
    componentDidMount: function() { 
    }, 
    render: function() { 
    return (
     <div> 
     {this.props.answers.map(function(answer, i) { 
      return (
      <div id="answerRow"> 
       <label className="AnswerText"> 
       <input type="checkbox" value={answer.id} /> 
       {answer.text} 
       </label> 
      </div> 
     ); 
     }, this)} 
     </div> 
    ); 
    } 
});