Wie ändere ich Tailwind-CSS-Klassen in React mithilfe von Vorlagenliteralen dynamisch?

Tailwind CSS: Dynamische Klassenänderungen mit Vorlagenliteralen

Bei der Arbeit mit bedingtem Stil in React ist die Nutzung von Vorlagenliteralen in Tailwind CSS eine leistungsstarke Lösung Technik zum dynamischen Ändern von Klassen. Sehen wir uns an, wie dies effektiv implementiert werden kann.

Das Problem

Einige Entwickler stoßen auf Probleme, wenn sie Vorlagenliterale verwenden, um Klassen in Tailwind CSS bedingt zu ändern. Code ähnlich dem folgenden funktioniert beispielsweise möglicherweise nicht wie erwartet:

const closeNav = () => {
  setClick(!click);
};

<div className={`absolute inset-0 ${click ? "translate-x-0" : "-translate-x-full" } transform z-400 h-screen w-1/4 bg-blue-300`}></div>

Die Lösung

Die richtige Methode zum Anwenden von Vorlagenliteralen für dynamische Klassenänderungen ist wie folgt folgt:

<div className={click ? "absolute inset-0 translate-x-0 transform z-400 h-screen w-1/4 bg-blue-300" : "absolute inset-0 -translate-x-full transform z-400 h-screen w-1/4 bg-blue-300"}></div>

Alternativ auch ohne Vorlage Literale:

<div className={"absolute inset-0 " + (click ? "translate-x-0" : "-translate-x-full") + " transform z-400 h-screen w-1/4 bg-blue-300"}></div>

Überlegungen

Vermeiden Sie die Verwendung von Zeichenfolgenverkettungen zum Erstellen von Klassennamen, da dies die Optimierungen von Tailwind behindern kann. Entscheiden Sie sich stattdessen für die Auswahl vollständiger Klassennamen oder verwenden Sie Klassenauswahltechniken wie classNames, clsx oder Tailwind-spezifische Lösungen wie twin.macro, twind und xwind.

Andere Optionen

Bedingtes Styling kann auch mithilfe von Bibliotheken von Drittanbietern wie classnames oder clsx oder Tailwind-spezifischen Lösungen wie twin.macro, twind und erreicht werden xwind.

Weiterführende Literatur

Weitere Informationen finden Sie in den folgenden Ressourcen:

• [React.js bedingt anwendende Klasse Namen](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [Wie füge ich eine Klasse dynamisch zu manuellen Klassennamen hinzu?](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [Korrekter Umgang mit bedingtem Styling in Reagieren](https://stackoverflow.com/questions/44916340/correct-way-to-handle-conditional-styling-in-react)
• [Ausdrücke einbetten in JSX](https://reactjs.org/docs/jsx-in- Depth.html#embedding-expressions-in-jsx)
• [Vorlagenliterale – MDN](https://developer.mozilla. org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimierung für die Produktion – Schreiben von löschbarem HTML - Tailwind CSS](https://tailwindcss.com/docs/optimizing-for-produktion#writing-purgeable-html)

Das obige ist der detaillierte Inhalt vonWie ändere ich Tailwind-CSS-Klassen in React mithilfe von Vorlagenliteralen dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!