web-dev-qa-db-fra.com

Manière correcte de gérer le style conditionnel dans React

Je suis en train de faire un peu de réaction en ce moment et je me demandais s’il existait une méthode "correcte" de stylisation conditionnelle. Dans le tutoriel, ils utilisent

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

Je préfère ne pas utiliser le style en ligne, je préfère donc utiliser une classe pour contrôler le style conditionnel. Comment aborderait-on cela dans le mode de pensée React? Ou devrais-je simplement utiliser ce style de style en ligne?

javascriptreactjs
35
davidhtien

Si vous préférez utiliser un nom de classe, utilisez un nom de classe.

className={completed ? 'text-strike' : null}

Vous pouvez également trouver les classnames package utiles. Avec cela, votre code ressemblerait à ceci:

className={classNames({ 'text-strike': completed })}

Il n'y a pas de manière "correcte" de faire un style conditionnel. Faites ce qui vous convient le mieux. Pour ma part, je préfère éviter le style en ligne et utiliser des classes de la manière décrite ci-dessus.

39
David L. Walsh
 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

Commander le code ci-dessus. Cela fera l'affaire.

40
Abhay Shiro

Tout d’abord, je suis d’accord avec vous sur le plan du style - j’appliquerais aussi (et appliquerai aussi) de manière conditionnelle des classes plutôt que des styles en ligne. Mais vous pouvez utiliser la même technique:

<div className={{completed ? "completed" : ""}}></div>

Pour des ensembles d'états plus complexes, accumulez un tableau de classes et appliquez-les:

var classes = [];

if (completed) classes.Push("completed");
if (foo) classes.Push("foo");
if (someComplicatedCondition) classes.Push("bar");

return <div className={{classes.join(" ")}}></div>;
3
S McCrohan

Je suis tombé sur cette question en essayant de répondre à la même question. L'approche de McCrohan avec le tableau de classes et rejoindre est solide.

Grâce à mon expérience, j'ai travaillé avec beaucoup de code Ruby hérité qui est en train d'être converti en React et au fur et à mesure que nous construisons le (s) composant (s), je me retrouve à tendre la main pour les classes css existantes et les styles en ligne. 

exemple d'extrait de code à l'intérieur d'un composant: 

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

Encore une fois, je me retrouve à tendre la main au code CSS existant, à le "conditionner" avec le composant et à passer à autre chose. 

Donc, j’ai vraiment le sentiment que ce qui est "mieux" est un peu dans l’air, car cette étiquette variera considérablement en fonction de votre projet. 

1
Denis S Dujota

la meilleure façon de gérer le style consiste à utiliser des classes avec un ensemble de propriétés css.

Exemple: 

<Component className={this.getColor()} />

getColor(){
let class = "badge m2";
class + = this.state.count===0?"wrarning":danger
return class
}
0
Snivio