ReactJS ajoute une classe dynamique aux noms de classe manuels

J'ai besoin d'ajouter une classe dynamique à une liste de classes régulières, mais je n'ai aucune idée de comment (j'utilise babel), quelque chose comme ceci:

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

Des idées?

Vous pouvez soit faire ceci, JavaScript normal:

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

ou la version du modèle de chaîne, avec des backticks:

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

Les deux types sont bien sûr juste du JavaScript, mais le premier modèle est le type traditionnel.

Quoi qu'il en soit, dans JSX, tout ce qui est entre accolades est exécuté en JavaScript, vous pouvez donc faire ce que vous voulez. Mais combiner des chaînes JSX et des accolades n'est pas une option pour les attributs.

En fonction du nombre de classes dynamiques que vous devez ajouter au fur et à mesure de la croissance de votre projet, il vaut probablement la peine de consulter l' utilitaire de noms de classe de JedWatson sur GitHub. Il vous permet de représenter vos classes conditionnelles en tant qu'objet et renvoie celles dont la valeur est vraie.

Donc, à titre d'exemple tiré de sa 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 nouveau rendu en cas de changement d'état, vos noms de classes dynamiques sont gérés naturellement et tenus à jour avec l'état de votre composant.

Une syntaxe simple possible sera:

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

Voici la meilleure option pour Dynamic className, faites simplement une concaténation comme nous le faisons en Javascript.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

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

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

essayez ceci en utilisant des crochets:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

et ajoutez ceci dans l'attribut className:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

pour ajouter une classe:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

pour supprimer la classe:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Vous pouvez utiliser ce package 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})} />

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

className={css(styles.mainDiv, 'subContainer')}

Cette solution a fait ses preuves dans React SPFx.

Ajoutez également une instruction d'importation:

import { css } from 'office-ui-fabric-react/lib/Utilities';