[英]Loop inside of a loop, in React JSX
I am trying to render in react, jsx, a loop inside of a loop Like bellow: 我正在尝试在像波纹管这样的循环内部的jsx中渲染一个循环:
{this.state.ans.map(function(item) {
return (
{this.state.quest.map(
function(item1) {return (item1)}
)}
{item}
)
})}
This does not work any other suggestions 这没有任何其他建议
You forgot the wrapping div in your first map
statement: 您在第一个map
语句中忘记了包装div:
render() {
return (
<div>
{this.state.ans.map(item =>
<div> // this div was missing
{this.state.quest.map(quest => quest)}
{item}
</div>
)}
</div>
)
}
Try it like this: 像这样尝试:
render(){
return (
.
.
.
{this.state.ans.map((item) => {
return (
<div>
{this.state.quest.map((item1) => {
return (item1);
}
)}
{item}
</div>
);
})}
);
}
Basically the idea is that, you should return a single element - in my example a div
(with the latest react version you don't have to). 从根本上讲,您应该返回一个元素-在我的示例中为div
(您不必使用最新的react版本)。 And moreover, use lambdas in order for this
to reference the correct context. 而且,使用lambda表达式为了this
以引用正确的上下文。
If you do not use ES6, you can add the following statement at the beginning of the render
method: 如果不使用ES6,则可以在render
方法的开头添加以下语句:
var that = this;
and use that
afterwards with the function(){}
syntax inside the return
. 然后将that
与return
内部的function(){}
语法一起使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.