[英]React / Javascript If statement inside map
I'm trying to make a table which will have different coloured rows depending on an attribute which is derived from a map function: 我正在尝试制作一个表,该表将根据从map函数派生的属性具有不同颜色的行:
var tableData = this.state.data.map(attribute =>
{if(attribute.duplicate.toString()== "true")
return <tr className="table-success">;
else
return <tr className="table-warning">;
}
<td> {count++} </td>
...
<td> {attribute.duplicate.toString()} </td>
</tr>
);
Now var tableData
gets passed through to the actual table: 现在,
var tableData
传递到实际表:
<div>
<div>
<table className="table">
<tr className="thead-inverse">
<th> # </th>
...
<th> duplicate </th>
</tr>
{tableData}
</table>
</div>
</div>
But I get the following error: 但是我收到以下错误:
[INFO] Module build failed: SyntaxError: C:/Users/.../all.js: Unterminated JSX contents (78:14)
[INFO]
[INFO] 76 |
[INFO] 77 | </div>
[INFO] > 78 | </div>
[INFO] | ^
Any ideas what the problem is, or another way to achieve what I'm trying to do? 任何想法是什么问题,还是实现我正在尝试的另一种方式?
Just move the conditional logic inside the className
or assign it to a variable and then use it inside the tr
. 只需将条件逻辑移到
className
或将其分配给变量,然后在tr
内使用它即可。
var tableData = this.state.data.map(attribute =>
<tr className={attribute.duplicate.toString() == "true" ? "table-success" : "table-warning"}>
<td> {count++} </td>
...
<td> {attribute.duplicate.toString()} </td>
</tr>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.