提问人：Banshee 提问时间：2/18/2015 更新时间：9/26/2019 访问量：158825
如果在地图返回中如何使用？
How to use if within a map return?
问：
我需要根据数据模型生成不同的 reactJS 代码，但我得到
在文件“~/Scripts/Grid.jsx”中：解析错误：第 13 行：意外令牌 如果（在第 13 行第 15 列） 行：52 列：3
使用此代码
var GridRow = React.createClass({
render: function() {
var row;
row = this.props.cells.map(function(cell, i) {
return (
if(cell.URL != null && cell.URL.length > 0){
<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>
}
else {
<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>
}
);
}.bind(this));
return (
<tr>
{row}
</tr>
);
}
});
渲染部分似乎真的限制了它的使用方式？
答：
50赞
nilgun
2/18/2015
#1
你把语句放在子句里，这样：returnif
row = this.props.cells.map(function(cell, i) {
if(cell.URL != null && cell.URL.length > 0){
return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;
}
else {
return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;
}
}.bind(this));
评论
2赞
Chrisk8er
7/17/2016
你能解释一下为什么if语句不能写在返回表中吗？
6赞
nilgun
7/18/2016
@Chrisk8er 好吧，它在 js 和 jsx 中都不是有效的语法。
0赞
S.Kiers
6/6/2017
@Chrisk8er是的，它是有效的 javascript，并且一直在 JSX 中使用。请参阅下面的答案，了解如何使用三元语句
0赞
Matt Saunders
8/14/2017
出于某种原因，这对我不起作用 - else 语句似乎从未触发
11赞
S.Kiers
2/16/2017
#2
您也可以使用三元（内联 if/else）语句。它可能如下所示：
row = this.props.cells.map(function(cell, i) {
return (cell.URL != null && cell.URL.length > 0) ?
(<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) :
(<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>)
}.bind(this));
或者 es6
row = this.props.cells.map((cell, i) => (cell.URL != null && cell.URL.length > 0) ?
(<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) :
(<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>)
);
但是，为了可读性，我建议 nilgun 的答案。
虽然我会删除 else 语句，因为它是多余的。您也可以删除大括号，这是一个偏好问题。
row = this.props.cells.map(function(cell, i) {
if(cell.URL != null && cell.URL.length > 0)
return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;
return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;
}.bind(this));
评论
0赞
Malcolm Salvador
5/8/2020
嗨，@S.Kiers，在 e6 示例中，我们如何做一个其他 if？
1赞
S.Kiers
5/10/2020
你说的是三元的例子吗？如果你需要else if，我建议你使用一个完整的if/elseif/else块。三元运算符通常只是句法糖。但是，如果需要，您可以“嵌套”三元运算符（例如，在 react 中您可以这样做，但不要这样做！condition1 ? "This is the IF" : condition2 ? "This is the ELSE IF" : "This is the ELSE"
评论