Question

我需要根据datamodel生成不同的reactJS代码，但我得到了

在文件“〜/ Scripts / Grid.jsx”中：解析错误：第13行：意外的令牌 if（第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>
        );
    }
});

渲染部分在如何使用方面似乎非常有限？

Answer 1

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

Answer 2

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

如果在地图内返回如何使用？

2 个答案: