web-dev-qa-db-fra.com

Comment utiliser si dans un retour de carte?

J'ai besoin de générer un code reactJS différent basé sur un modèle de données mais j'obtiens

Dans le fichier "~/Scripts/Grid.jsx": erreur d'analyse: ligne 13: jeton inattendu si (à la ligne 13 colonne 15) ligne: 52 colonne: 3

Avec ce code

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

La partie de rendu semble être vraiment limitée dans la façon dont elle peut être utilisée?

javascriptreactjsreact-jsx
18
Banshee

Vous mettez l'instruction return dans la clause if comme ceci:

    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

Vous pouvez également utiliser une instruction ternaire (inline if/else). Cela pourrait ressembler à ceci:

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

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

mais, pour plus de lisibilité, je suggère la réponse de nilgun.

Bien que je supprimerais la déclaration else, car elle est redondante. Vous pouvez également supprimer les accolades, c'est une question de préférence.

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