So wenden Sie Klassenattribute bedingt in React an: Warum funktioniert das Umschalten der Sichtbarkeit meiner Schaltflächengruppe nicht?

Bedingtes Anwenden von Klassenattributen in React

Konzeptionell ist das bedingte Rendern von Elementen ein häufiger Anwendungsfall in React. Bei der Betrachtung von Klassenattributen stellt sich jedoch die Frage. In diesem Artikel wird anhand eines praktischen Beispiels erläutert, wie Klassenattribute bedingt angewendet werden:

Frage:

Ein Benutzer versucht, die Sichtbarkeit einer Schaltflächengruppe basierend auf a umzuschalten boolescher Wert, der von einer übergeordneten Komponente übergeben wird. Das Klassenattribut wird jedoch nicht korrekt ausgewertet.

<code class="jsx"><div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

Antwort:

Das Problem liegt in der Platzierung der geschweiften Klammern, die den Ausdruck umgeben. Anstatt sich innerhalb der Zeichenfolge zu befinden, sollten sie zusammen mit den Klammern wie folgt außerhalb der Zeichenfolge stehen:

<code class="jsx"><div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

Durch die Platzierung der geschweiften Klammern außerhalb der Zeichenfolge wird der Ausdruck als JavaScript-Code und nicht als statische Zeichenfolge ausgewertet . Dadurch kann die richtige Klasse basierend auf dem booleschen Wert von this.props.showBulkActions angewendet werden.

Zusätzlich wird nach „pull-right“ ein Leerzeichen hinzugefügt, um sicherzustellen, dass das Klassenattribut ordnungsgemäß angewendet wird. Ohne das Leerzeichen besteht die Gefahr, dass eine ungültige Klasse erstellt wird, z. B. „pull-rightshow“ anstelle von „pull-right show“.

Das obige ist der detaillierte Inhalt vonSo wenden Sie Klassenattribute bedingt in React an: Warum funktioniert das Umschalten der Sichtbarkeit meiner Schaltflächengruppe nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!