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

Dynamisches Hinzufügen von Klassen zu manuellen Klassennamen in JSX

In JSX müssen wir häufig Klassen basierend auf bestimmten Bedingungen dynamisch zu Elementen hinzufügen. Dazu muss die Eigenschaft „className“ so bearbeitet werden, dass sie sowohl statische als auch dynamische Klassennamen enthält. So erreichen Sie dies:

Verwendung der JavaScript-Syntax

Sie können die normale JavaScript-Syntax verwenden, um dynamische Klassen zu manuellen Klassennamen hinzuzufügen:

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

Dadurch werden die statischen Klassennamen „wrapper“ und „searchDiv“ mit dem dynamischen Klassennamen verkettet, der durch die State-Eigenschaft bestimmt wird this.state.something.

String-Vorlagen verwenden

Alternativ können Sie String-Vorlagen (ES6-Vorlagenliterale) mit Backticks verwenden:

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

Mit dieser Syntax können Sie JavaScript-Ausdrücke direkt in die Zeichenfolge interpolieren, einschließlich dynamischer Klassen Namen.

Hinweis:

Denken Sie daran, dass alles, was in JSX in geschweifte Klammern steht, als JavaScript-Code interpretiert wird. Daher können Sie innerhalb des className-Attributs komplexe Logik ausführen und Zeichenfolgen nach Bedarf bearbeiten. Allerdings können Sie JSX-Strings und geschweifte Klammern nicht direkt innerhalb von Attributen kombinieren.

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