ReactJS fügt manuellen Klassennamen eine dynamische Klasse hinzu

Ich muss einer Liste regulärer Klassen eine dynamische Klasse hinzufügen, habe aber keine Ahnung, wie (ich verwende babel) so etwas:

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

Irgendwelche Ideen?

Sie können dies entweder mit normalem JavaScript tun:

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

oder die String-Template-Version mit Backticks:

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

Beide Typen sind natürlich nur JavaScript, aber das erste Muster ist das traditionelle.

In JSX wird alles, was in geschweiften Klammern steht, als JavaScript ausgeführt, sodass Sie dort grundsätzlich alles tun können, was Sie wollen. Das Kombinieren von JSX-Zeichenfolgen und geschweiften Klammern ist jedoch ein No-Go für Attribute.

Je nachdem , wie viele dynamische Klassen , die Sie hinzufügen müssen , wie Ihr Projekt ist es wahrscheinlich lohnt sich , die wächst Klassennamen Dienstprogramm von JedWatson auf GitHub. Sie können Ihre bedingten Klassen als Objekt darstellen und diejenigen zurückgeben, die als wahr ausgewertet werden.

Als Beispiel aus der React-Dokumentation:

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>;

} 

Da React bei einer Statusänderung ein erneutes Rendern auslöst, werden Ihre dynamischen Klassennamen auf natürliche Weise behandelt und über den Status Ihrer Komponente auf dem neuesten Stand gehalten.

Eine einfache mögliche Syntax ist:

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

Hier ist die beste Option für Dynamic className. Führen Sie einfach eine Verkettung durch, wie wir es in Javascript tun.

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

Wenn Sie Stilnamen benötigen, die entsprechend der Zustandsbedingung angezeigt werden sollen, bevorzuge ich diese Konstruktion:

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

Versuchen Sie dies mit Haken:

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

und fügen Sie dies im Attribut className hinzu:

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

Klasse hinzufügen:

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

Klasse löschen:

        const deleteClass= classToDelete => {

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

        }

Sie können dieses npm-Paket verwenden. Es behandelt alles und verfügt über Optionen für statische und dynamische Klassen, die auf einer Variablen oder einer Funktion basieren.

// 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')}

Diese Lösung hat sich in React SPFx bewährt.

Fügen Sie außerdem die Importanweisung hinzu:

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