Astro-Kurs 14: Props – Daten an Komponenten übergeben

Etappe 2 – Lektion 14 von 22 · Modellbau-Werkstatt
Voraussetzungen: Etappe 1 (Teile 1–11); ab Teil 13 auch die jeweils vorherige Lektion.

Lernziel: Du passt Komponenten mit Eigenschaften an, ohne sie zu duplizieren.

1. Was sind Props?

Props sind Eigenschaften, die eine Komponente von ihrer aufrufenden Seite erhält. So kann dieselbe Projektkarte verschiedene Projekte darstellen.

Lege src/components/ProjektKarte.astro an:

---
interface Props {
  titel: string;
  beschreibung: string;
  bild?: string;
}
const { titel, beschreibung, bild } = Astro.props;
---
<article class="karte">
  {bild && <img src={bild} alt={`Bild zum Projekt ${titel}`} />}
  <h2>{titel}</h2>
  <p>{beschreibung}</p>
</article>
<style>
  .karte { padding: 1.25rem; border-radius: .75rem; background: #f1f6f9; }
  img { width: 100%; height: auto; border-radius: .5rem; }
</style>

interface Props legt die erlaubten Eigenschaften fest. Das ? bedeutet optional: Ein Bild muss nicht immer angegeben werden.

Nutze die Komponente in src/pages/karte-test.astro:

---
import ProjektKarte from '../components/ProjektKarte.astro';
---
<html lang="de">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Projektkarten</title></head>
<body>
  <h1>Meine Projekte</h1>
  <ProjektKarte titel="3D-Druck" beschreibung="Praktische Bauteile aus dem Drucker." />
  <ProjektKarte titel="Modellflug" beschreibung="Flugmodelle planen und bauen." />
</body>
</html>

2. Bilder ergänzen

Bilder im Ordner public/bilder/ kannst du mit bild="/bilder/3d-druck.jpg" angeben. Die Datei muss tatsächlich vorhanden sein.

Übung

Ergänze eine dritte Karte zum Thema Elektronik. Nutze anschließend ein eigenes Bild für eine der Karten.

Merksatz: Props transportieren Daten; die Komponente kümmert sich um ihre Darstellung.

Alle Beispiele beziehen sich auf ein eigenes Astro-Übungsprojekt. Die Dateipfade sind relativ zum Projekt-Hauptordner angegeben. Die Kursdateien selbst gehören in das Content-Verzeichnis der Know-How-Schmiede, nicht in das Übungsprojekt.