webentwicklung-frage-antwort-db.com.de

ReactJS fügt den manuellen Klassennamen dynamische Klassen hinzu

Ich muss eine dynamische Klasse zu einer Liste von regulären Klassen hinzufügen, habe aber keine Ahnung, wie (ich benutze Babel):

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

Irgendwelche Ideen?

Vielen Dank

85
Mankind1023

Sie können dies entweder normales Javascript tun:

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

oder die Stringvorlagenversion

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

Beide Typen sind natürlich nur Javascript, aber das erste Muster ist traditionell. In JSX wird alles, was in geschweiften Klammern eingeschlossen ist, als Javascript ausgeführt, sodass Sie grundsätzlich alles tun können, was Sie möchten. Das Kombinieren von JSX-Strings und geschweiften Klammern ist jedoch ein Muss für Attribute.

135
dannyjolie

Abhängig von der Anzahl der dynamischen Klassen, die Sie hinzufügen müssen, wenn Ihr Projekt wächst, lohnt es sich wahrscheinlich, das Dienstprogramm classnames von JedWatson auf GitHub zu überprüfen. Damit können Sie 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.

39
Brad Colthurst

Eine einfache mögliche Syntax ist:

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

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

     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>

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" : "")'}>
0
Sergey Gubarev

Sie können das Paket " this npm" verwenden. Es behandelt alles und bietet Optionen für statische und dynamische Klassen, die auf einer Variablen oder 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})} />
0
Tushar Sharma