Ich möchte diese Schaltflächengruppe bedingt ein- und ausblenden, je nachdem, was von der übergeordneten Komponente übergeben wird, die folgendermaßen aussieht:
<TopicNav showBulkActions={this.__hasMultipleSelected} />
....
__hasMultipleSelected: function() {
return false; //return true or false depending on data
}
....
var TopicNav = React.createClass({
render: function() {
return (
<div className="row">
<div className="col-lg-6">
<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Bulk Actions <span className="caret"></span>
</button>
<ul className="dropdown-menu" role="menu">
<li><a href="#">Merge into New Session</a></li>
<li><a href="#">Add to Existing Session</a></li>
<li className="divider"></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
);
}
});
Mit den {this.props.showBulkActions? 'Verborgenes zeigen'}. Mache ich hier etwas falsch?
Antworten:
Die geschweiften Klammern befinden sich innerhalb der Zeichenfolge, daher wird sie als Zeichenfolge ausgewertet. Sie müssen draußen sein, also sollte dies funktionieren:
Beachten Sie das Leerzeichen nach "Nach rechts ziehen". Sie möchten nicht versehentlich die Klasse "pull-rightshow" anstelle von "pull-right show" bereitstellen. Auch die Klammern müssen vorhanden sein.
quelle
classnames
möglicherweise nicht angemessen ist. Wenn Sie in Ihrerrender
Funktion sind und eine habenmap
, wissen Sie möglicherweise nur, ob Sie eine Klasse zum Zeitpunkt des Renderns hinzufügen möchten. Diese Antwort ist daher sehr nützlich.this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')
. Nicht elegant, aber es funktioniert.Wie andere kommentiert haben, ist das Dienstprogramm classnames der derzeit empfohlene Ansatz, um bedingte CSS-Klassennamen in ReactJs zu verarbeiten.
In Ihrem Fall sieht die Lösung folgendermaßen aus:
...
Als Randnotiz würde ich Ihnen empfehlen, die Verwendung von beiden
show
undhidden
Klassen zu vermeiden , damit der Code einfacher ist. Höchstwahrscheinlich müssen Sie keine Klasse festlegen, damit etwas standardmäßig angezeigt wird.quelle
classNames
im Moment?Wenn Sie einen Transpiler (wie Babel oder Traceur) verwenden, können Sie die neuen ES6 " Template Strings " verwenden.
Hier ist die Antwort von @ spitfire109, entsprechend geändert:
Mit diesem Ansatz können Sie solche netten Dinge tun, indem Sie entweder
s-is-shown
oder Folgendes renderns-is-hidden
:quelle
s-is-shown
oders-is-hidden
in der Codebasis sucht , findet er diesen Code nicht.Sie können hier String-Literale verwenden
quelle
Wenn man sich die gute Antwort von @ spitfire109 ansieht, könnte man so etwas tun:
und dann innerhalb der Renderfunktion:
hält das jsx kurz
quelle
Oder verwenden Sie npm- Klassennamen . Es ist sehr einfach und nützlich, insbesondere zum Erstellen der Klassenliste
quelle
Falls Sie nur einen optionalen Klassennamen benötigen:
quelle
false
Klasse angehängt , wenn die Bedingung fehlschlägt.Sie können ES6-Arrays anstelle von Klassennamen verwenden. Die Antwort basiert auf dem Artikel von Dr. Axel Rauschmayer: Bedingtes Hinzufügen von Einträgen in Array- und Objektliteralen .
quelle
2019:
Reagieren ist See viele Dienstprogramme. Dafür brauchen Sie aber kein
npm
Paket. Erstellen Sie einfach irgendwo die Funktionclassnames
und rufen Sie sie bei Bedarf auf.oder
Beispiel
Nur zur Inspiration
Deklarieren Sie das Hilfselement und verwenden Sie es als
toggle
Methode(DOMTokenList)classList.toggle(class,condition)
Beispiel:
quelle
Elegantere Lösung, die für Wartung und Lesbarkeit besser ist:
quelle
Sie können dies verwenden:
quelle
Das würde für dich funktionieren
quelle
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.
quelle
Basierend auf dem Wert von können
this.props.showBulkActions
Sie Klassen wie folgt dynamisch wechseln.quelle
Ich möchte hinzufügen, dass Sie auch einen variablen Inhalt als Teil der Klasse verwenden können
Der Kontext ist ein Chat zwischen einem Bot und einem Benutzer, und die Stile ändern sich je nach Absender. Dies ist das Ergebnis des Browsers:
quelle
Dies ist nützlich, wenn Sie mehr als eine Klasse anhängen müssen. Sie können alle Klassen in einem Array mit einem Leerzeichen verbinden.
quelle
Ersetzen:
mit:
quelle
Verweis auf @split fire answer, wir können es mit Vorlagenliteralen aktualisieren, die besser lesbar sind. Als Referenz Checkout Javascript-Vorlagenliteral
quelle
Ich fand dies , das erklärt, wie man es mit einem ternären und mit Classnames Library macht
quelle