Wie füge ich mithilfe von Babel dynamisch Klassen hinzu, um auf Elemente zu reagieren?

Dynamische Klassenaddition in Babel

Bei der Arbeit mit dynamischen Inhalten ist es häufig notwendig, Elementen zusätzliche Klassen hinzuzufügen. In React-Anwendungen, die Babel verwenden, kann dies über das className-Attribut erreicht werden.

Frage:

Wie kann eine dynamische Klasse an eine Liste vorhandener Klassen angehängt werden? Beispielsweise muss eine React-Komponente mit dem Klassennamen „wrapper searchDiv“ dynamisch auf „wrapper searchDiv {this.state.something}“ aktualisiert werden.

Antwort:

Um dies zu erreichen, gibt es zwei Ansätze:

1. Traditionelle JavaScript-Methode:

Fügen Sie die zusätzliche Klasse innerhalb des className-Attributs mit JavaScript hinzu, etwa so:

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

2. String-Vorlagenmethode:

Verwenden Sie Backticks, um eine String-Vorlage zu erstellen, die einen saubereren und prägnanteren Code ermöglicht:

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

Bei beiden Methoden enthalten die geschweiften Klammern JavaScript-Code. Ermöglicht die Änderung von Zeichenfolgen und das Hinzufügen dynamischer Werte. Es ist jedoch wichtig zu beachten, dass die Kombination von JSX-Strings und geschweiften Klammern innerhalb von Attributen nicht unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von Babel dynamisch Klassen hinzu, um auf Elemente zu reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!