Bonne façon de gérer le style conditionnel dans React

Je fais un peu de React en ce moment et je me demandais s'il y avait une façon "correcte" de faire du style conditionnel. Dans le tutoriel qu'ils utilisent

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

Je préfère ne pas utiliser de style en ligne, donc je veux plutôt utiliser une classe pour contrôler le style conditionnel. Comment aborder cela dans la manière de penser React? Ou devrais-je simplement utiliser cette méthode de style en ligne?

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

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

Vous pouvez également trouver le package classnames utile. Avec lui, votre code ressemblerait à ceci:

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

Il n'y a pas de manière «correcte» de faire du 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 que je viens de décrire.

POSTSCRIPT [06-AOÛ-2019]

S'il reste vrai que React n'a pas d'opinion sur le style, je recommanderais ces jours-ci une solution CSS-in-JS; à savoir les composants stylisés ou l' émotion . Si vous débutez avec React, tenez-vous-en aux classes CSS ou aux styles en ligne pour commencer. Mais une fois que vous êtes à l'aise avec React, je vous recommande d'adopter l'une de ces bibliothèques. Je les utilise dans chaque projet.

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

Vérifiez le code ci-dessus. Cela fera l'affaire.

Si vous devez appliquer conditionnellement des styles en ligne (appliquer tout ou rien), cette notation fonctionne également:

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

Si 'someCondition' n'est pas remplie, vous passez un objet vide.

Premièrement, je suis d'accord avec vous pour une question de style - j'appliquerais également (et ferais aussi) des classes conditionnelles 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>;

au lieu de cela:

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

vous pouvez essayer ce qui suit en utilisant un court-circuit:

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

information clé du lien:

Le court-circuit signifie qu'en JavaScript, lorsque nous évaluons une expression AND (&&), si le premier opérande est faux, JavaScript court-circuitera et ne regardera même pas le deuxième opérande.

Il est intéressant de noter que cela renverrait false si le premier opérande est faux, vous devrez peut-être considérer comment cela affecterait votre style.

Les autres solutions sont peut-être plus de bonnes pratiques, mais elles ont estimé qu'elles mériteraient d'être partagées.

Une autre façon, en utilisant le style en ligne et l'opérateur de propagation

style={{
  ...completed ? { textDecoration: completed } : {}
}}

Cela peut être utile dans certaines situations où vous souhaitez ajouter un ensemble de propriétés en même temps en fonction de la condition.

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

Grâce à mon expérience, j'ai travaillé avec beaucoup de code ruby ​​hérité qui est converti en React et à mesure que nous construisons le (s) composant (s), je me retrouve à la recherche de classes css existantes et de 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 trouve en train de tendre la main au code css hérité, de le «conditionner» avec le composant et de passer à autre chose.

Donc, j'ai vraiment l'impression qu'il y a un peu de doute sur ce qui est «meilleur» car ce label variera énormément en fonction de votre projet.

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 ? "warning" : danger;
    return class;
}

Vous pouvez utiliser quelque chose comme ça.

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

Ou bien, vous pouvez utiliser le package NPM de noms de classe pour simplifier le travail des accessoires de nom de classe dynamiques et conditionnels (en particulier plus que la manipulation de chaînes conditionnelles).

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'