Template-Literale für dynamische Klassen

Snippet

Template-Literale für dynamische Klassen

Template-Literale (mit Backticks ``) ermöglichen es dir, JavaScript-Ausdrücke mit ${} in Strings einzubetten. Dies ist sehr nützlich, um dynamische CSS-Klassennamen basierend auf Komponenten-Props zu erstellen.

snippet.js

javascript

function Alert({ type, message }) {
  return (
    <div className={`alert alert-${type}`}>
      {message}
    </div>
  );
}

react

Erklärung

className={`alert alert-${type}`}

Kombiniert statische Strings mit dem Wert der Variable 'type', um einen vollständigen Klassennamen zu bilden.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Verwandt

Aus deiner Bibliothek