Javascript 如何在地图返回中使用if？

我需要根据数据模型生成不同的代码，但我得到

在文件“~/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>
        );
    }
});

var GridRow=React.createClass({
render:function（）{
var行；
行=this.props.cells.map（函数（cell，i）{
返回(
如果（cell.URL！=null&&cell.URL.length>0）{
{cell.Text}
}
否则{
{cell.Text}
}
);
}.约束（这个）；
返回(
{row}
);
}
});

---

渲染部分似乎在如何使用方面受到了限制？

您将

return

语句放在

if

子句中，如下所示：

    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));

row=this.props.cells.map（函数（cell，i）{
如果（cell.URL！=null&&cell.URL.length>0）{
返回{cell.Text}；
}
否则{
返回{cell.Text}；
}
}.约束（这个）；

您还可以使用（内联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));

row=this.props.cells.map（函数（cell，i）{
返回（cell.URL！=null&&cell.URL.length>0）？
（{cell.Text}）：
（{cell.Text}）
}.约束（这个）；

还是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>)
);

row=this.props.cells.map（（cell，i）=>（cell.URL！=null&&cell.URL.length>0）？
（{cell.Text}）：
（{cell.Text}）
);

但是，为了可读性，我建议尼尔根的答案

虽然我会删除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));

row=this.props.cells.map（函数（cell，i）{
如果（cell.URL！=null&&cell.URL.length>0）
返回{cell.Text}；
返回{cell.Text}；
}.约束（这个）；

您是否尝试过定义每个分支并确定在返回语句之前需要哪个分支？我对render js一点也不太专业，但在我看来，它并没有完全重写javascript：在返回语句中可能找不到if语句似乎在这两种情况下，if-else都创建了一个相同的语句。你能解释一下if语句为什么不能在返回语句中写入吗？@Chrisk8er，它在js和jsx中都不是有效的语法。@Chrisk8er是的，它是有效的javascript，并且一直在jsx中使用。请参阅下面关于如何使用三元语句的答案出于某种原因，这对我不起作用-else语句似乎从来都不fireHi@S.Kiers，在e6示例中，我们如何执行else if？您正在谈论的是三元示例？如果您需要elseif，我建议您使用完整的If/elseif/else块。三元运算符通常只是语法上的糖。但是，如果需要，您可以“嵌套”三元运算符（例如，在react中，您可以这样做，但不要！）：

condition1？“这是假设”：条件2？“这是ELSE IF”：“这是ELSE”