React Render中的不变违规或在React中迭代和返回的正确方法 [英] Invariant Violation in React Render OR the proper way to iterate and return in React
问题描述
我在React渲染中遇到了持久性问题。
I'm running into persistent problems in my React renders.
此代码
/** @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>
)
}
})
会给我不变违规:AnswerRows.render():必须返回有效的ReactComponent。您可能已经返回了undefined,数组或其他一些无效对象。
错误。但是,每次都有效:
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:
/** @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.
推荐答案
您无法从渲染函数返回多个元素(如map函数返回的数组)。此外,你错过了一个return语句。试试这个:
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:
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>
);
}
});
这篇关于React Render中的不变违规或在React中迭代和返回的正确方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!