Javascript React Render中的不变冲突或React中迭代和返回的正确方法

我在我的工作中遇到了持续的问题

此代码

/** @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>
    )
  }
})

---

我真的很想了解这里发生了什么，也许是正确的方法

不能从render函数返回多个元素（如map函数返回的数组）。此外，您还缺少返回语句。试试这个：

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>
    );
  }
});

var AnswerRows=React.createClass({
componentDidMount:function（）{
},
render:function（）{
返回(
{this.props.answers.map（函数（answer，i）{
返回(
{answer.text}
);
}，这个）}
);
}
});

您能解释一下div中的最后一行吗？为什么要将其传递给map？请进一步解释。我遇到了这个确切的问题，不完全理解解决方案。@monkeyjumps这是为了确保传递给map的函数中的

this

的值与渲染函数中的

this

的值相同。有关详细信息，请参阅map文档@sweeds确保在渲染函数中只返回一个节点。不能返回多个节点的数组。如果您想这样做，您必须将其包装在另一个元素中，例如我给出的解决方案中的

div

。

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>
    );
  }
});