Javascript React Render 中的不变违规或在 React 中迭代和返回的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26430757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invariant Violation in React Render OR the proper way to iterate and return in React
提问by Ryanmt
I'm running into persistent problems in my React renders.
我在 React 渲染中遇到了持续存在的问题。
This 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>
)
}
})
Will give me Invariant Violation: AnswerRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.errors. However, this works every time:
会给我Invariant Violation: AnswerRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.错误。但是，这每次都有效：
/** @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>
)
}
});
I'd really like to understand what is going on here, and perhaps the 'right' way to do it.
我真的很想了解这里发生了什么，也许是“正确”的方法。
回答by Becojo
You cannot return multiple elements (like the array returned by the map function) from the render function. Also, you're missing a return statement. Try this:
您不能从渲染函数返回多个元素（如 map 函数返回的数组）。此外，您还缺少 return 语句。尝试这个：
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>
);
}
});
