web-dev-qa-db-fra.com

ReactJS ajoute une classe dynamique aux noms de classe manuels

Je dois ajouter une classe dynamique à une liste de classes régulières, mais je ne sais pas comment (j'utilise babel), quelque chose comme ceci:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

Des idées?

Merci

cssreactjs
85
Mankind1023

Vous pouvez le faire, javascript normal:

className={'wrapper searchDiv ' + this.state.something}

ou la version du modèle de chaîne

className={`wrapper searchDiv ${this.state.something}`} avec backticks.

Les deux types ne sont bien sûr que du javascript, mais le premier motif est le type traditionnel. Quoi qu'il en soit, dans JSX, tout ce qui est entre accolades est exécuté en javascript, ce qui vous permet de faire ce que vous voulez. Mais combiner les chaînes JSX et entre accolades est un non-aller pour les attributs.

135
dannyjolie

En fonction du nombre de classes dynamiques à ajouter au fur et à mesure de la croissance de votre projet, il vaut probablement la peine de consulter le fichier classnames utility de JedWatson sur GitHub. Il vous permet de représenter vos classes conditionnelles sous forme d'objet et renvoie celles qui ont la valeur true. 

Ainsi, à titre d'exemple, tiré de la documentation React:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

}

Étant donné que React déclenche un re-rendu en cas de changement d'état, vos noms de classes dynamiques sont gérés naturellement et mis à jour avec l'état de votre composant.

39
Brad Colthurst

Une syntaxe simple possible sera:

<div className={`wrapper searchDiv ${this.state.something}`}>
20
oligopol

Voici la meilleure option pour le nom de classe dynamique. Il suffit de faire une concaténation comme en Javascript.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
3
Saad Mirza
getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>
0
Harshvardhan Singh Baghel

Si vous avez besoin de noms de style qui doivent apparaître en fonction de la condition d'état, je préfère utiliser cette construction:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
0
Sergey Gubarev

Vous pouvez utiliser le paquet this npm. Il gère tout et propose des options pour les classes statiques et dynamiques basées sur une variable ou une fonction.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
0
Tushar Sharma