web-dev-qa-db-ja.com

マップ内で戻る場合の使用方法

データモデルに基づいて異なる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>
        );
    }
});

レンダリング部分は、使用方法が本当に制限されているように見えますか？

javascriptreactjsreact-jsx
18
Banshee

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

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));
6
S.Kiers