Wie kann ich dynamische Klassen zu statischen Klassennamen in JSX hinzufügen?

Dynamische Klassen zu manuellen Klassennamen hinzufügen

Im Kontext von Babels JavaScript-basiertem JSX müssen Sie möglicherweise eine Dynamik anhängen Klasse zu einer Liste vorhandener Klassen hinzufügen. So können Sie dies erreichen:

Zwei Hauptansätze:

Traditionelles JavaScript:

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

Diese Methode kombiniert reguläre String-Verkettung zum Anhängen des dynamischen Klassennamens.

String-Vorlage Version:

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

Hier werden Backticks verwendet, um eine String-Vorlage zu erstellen, die die Interpolation von JavaScript-Ausdrücken ermöglicht.

JSX-spezifische Überlegungen:

In JSX schließen geschweifte Klammern JavaScript-Code ein, sodass alles darin ausgeführt wird. Bei der Kombination von JSX-Strings mit geschweiften Klammern für Attribute gibt es jedoch eine Einschränkung.

Alternativen:

Alternativ können Sie Babels Transform-Class-Properties-Plugin verwenden, um die Klasse zu aktivieren Eigentumszuweisungen in der Form:

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

Das obige ist der detaillierte Inhalt vonWie kann ich dynamische Klassen zu statischen Klassennamen in JSX hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!