Как использовать, если внутри карты возвращается?

Мне нужно создать отличный код реакции на основе datamodel, но я получаю

В файле "~/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>
        );
    }
});

Часть рендеринга кажется действительно ограниченной в том, как ее можно использовать?

Ответы

Ответ 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));

Ответ 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>)
);

но для удобства чтения я бы предложил нильгунский ответ.

Хотя я бы удалил оператор 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));