web-dev-qa-db-fra.com

condition multiple dans l'opérateur ternaire dans jsx

<div style={{'backgroundColor': status === 'approved' ? 'blue' : 'black'}}>
</div>

le noir est la couleur par défaut, mais que se passe-t-il si je veux ajouter la 3ème condition? 

le statut peut être «approuvé», «rejeté», «en attente» ou plus.

javascriptreactjsjsx
5
Jenny Mok

Vous pouvez faire ce qui suit:

<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>

Cela signifie que si status === 'approved' définit la couleur d'arrière-plan en bleu, si status === 'pending' la définit en noir, sinon, définissez-la en rouge.

6
Paul Fitzgerald

Je suggère d'utiliser des fonctions si vos conditions deviennent compliquées, pour ne pas dégrader la lisibilité de votre code.

getBackgroundColor(status) {
    if (status === 'approved') {
        return 'blue';
    }
    if (status === 'pending') {
        return 'red';
    }
    return 'black';
}

render() {
    // ...

    return (
        <div style={{ 'backgroundColor': this.getBackgroundColor(status) }}></div>
    );
}
6
Ghassen Louhaichi

Je le traiterais séparément car d'autres types de statut pourraient apparaître à l'avenir. 

const getBackgroundColor(status) {
  if (status === 'approved') {
    return 'blue'
  }
  else if (status === 'pending') {
    return 'black'
  } else {
    return 'red'
  }
}

<div style={{'backgroundColor': getBackgroundColor(status) }}>
</div>

Le code devient plus facile à comprendre et à raisonner. 

1
mersocarlin

L'utilisation de plusieurs opérateurs ternaires n'est pas une bonne idée, il est préférable d'utiliser une fonction et d'y placer les conditions if-else et d'appeler cette fonction depuis render Cela vous aide à rendre la pièce de rendu propre et courte.

Comme ça:

<div style={{'backgroundColor': this._style(status)}}></div>

_style(status){
    if(status == 'approved')
        return 'blue';
    else if(status == 'pending')
        return 'black';
    else return 'red';
}
0
Mayank Shukla

Pour chaîner des opérations ternaires, vous devez ajouter un autre opérateur ternaire à renvoyer lorsque les conditions ne sont pas remplies, par exemple:

a === true ? a : b

À la place de b, vous ajouteriez un nouvel opérateur ternaire, comme suit:

a === true ? a : b === true ? b : c

Prime:

Lorsque vous recherchez simplement null/undefined/false, vous pouvez utiliser l'opérateur de canal, par exemple ceci:

var x = a !== null ? a : b;

Peut être simplifié pour:

var x = a || b;

Et les opérateurs de pipe peuvent être chaînés à l'infini comme des opérateurs ternaires.

0
Dom