Astro Syntax

Wenn du HTML kennst, weißt du bereits genug, um deine erste Astro-Komponente zu schreiben.

Die Syntax von Astro-Komponenten ist eine Erweiterung von HTML. Die Syntax wurde so entworfen, dass sie für jeden, der Erfahrung mit HTML oder JSX hat, vertraut wirkt, und sie ermöglicht das Einbinden von Komponenten und JavaScript-Ausdrücken.

JSX-ähnliche Ausdrücke

Du kannst lokale JavaScript-Variablen innerhalb des Skripts der Frontmatter-Komponente zwischen den beiden Code-Grenzen (---) einer Astro-Komponente definieren. Du kannst dann diese Variablen mithilfe von JSX-ähnlichen Ausdrücken in das HTML-Template der Komponente einfügen!

Variabeln

Lokale Variablen können mithilfe der geschweiften-Klammern-Syntax in das HTML eingefügt werden:

---
const name = "Astro";
---
<div>
  <h1>Hallo {name}!</h1>  <!-- entspricht <h1>Hallo Astro!</h1> -->
</div>

Dynamische Attribute

Lokale Variablen können in geschweiften Klammern verwendet werden, um Attributwerte sowohl an HTML-Elemente als auch an Komponenten zu übergeben:

---
const name = "Astro";
---
<h1 class={name}>Attribute expressions are supported</h1>

<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

HTML-Attribute werden in Zeichenketten umgewandelt, daher ist es nicht möglich, Funktionen und Objekte an HTML-Elemente zu übergeben. Beispielsweise ist es nicht möglich, in einer Astro-Komponente einen event handler einem HTML-Element zuzuweisen:

---
function handleClick () {
    console.log("Knopf gedrückt!");
}
---
<!-- ❌ Das funktioniert nicht! ❌ -->
<button onClick={handleClick}>Nichts wird passieren, wenn du auf mich klickst!</button>

Stattdessen verwende ein clientseitiges Skript, um den event handler hinzuzufügen, so wie du es in reinem JavaScript tun würdest:

---
---
<button id="button">Drücke Mich</button>
<script>
  function handleClick () {
    console.log("Knopf gedrückt!");
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

Dynamisches HTML

Lokale Variablen können in JSX-ähnlichen Funktionen verwendet werden, um dynamisch generierte HTML-Elemente zu erzeugen:

---
const tiere = ["Dog", "Cat", "Platypus"];
---
<ul>
  {tiere.map((tier) => (
    <li>{tier}</li>
  ))}
</ul>

Astro kann bedingt HTML anzeigen, indem es JSX-logische Operatoren und Ternär-Ausdrücke verwendet.

---
const sichtbar = true;
---
{sichtbar && <p>Zeige mich!</p>}

{sichtbar ? <p>Zeige mich!</p> : <p>Zeige mich sonst!</p>}

Dynamische Tags

Du kannst auch dynamische Tags verwenden, indem du den Namen eines HTML-Tags einer Variablen zuweist oder einen Komponentenimport neu zuweist:

---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hallo!</Element> <!-- rendert als <div>Hallo!</div> -->
<Component /> <!-- rendert als <MyComponent /> -->

Bei der Verwendung von dynamischen Tags:

Die Variablennamen müssen großgeschrieben sein. Verwende beispielsweise Element und nicht element. Andernfalls wird Astro versuchen, deinen Variablennamen als wörtlichen HTML-Tag zu rendern.
Hydratisierungsanweisungen werden nicht unterstützt. Bei Verwendung von Hydratisierungsanweisungen client:* muss Astro wissen, welche Komponenten für die Produktion gebündelt werden sollen, und das Muster dynamischer Tags verhindert dies.
Die Direktive define:vars wird nicht unterstützt. Wenn du deinen Tag nicht in ein Containerelement (z. B. <div>) einhüllen kannst, dann kannst du style={`--maVariable:${Wert}} zu deinem Tag hinzufügen.

Fragmente

Astro unterstützt die <> </>-Notation und bietet außerdem eine eingebaute <Fragment />-Komponente. Diese Komponente kann nützlich sein, um Wrapper-Elemente zu vermeiden, wenn du set:*-Direktiven hinzufügst, um einen HTML-String zu injizieren.

Im folgenden Beispiel wird ein Absatztext mit der Komponente <Fragment /> dargestellt:

---
const htmlString = '<p>Roher HTML-Inhalt</p>';
---
<Fragment set:html={htmlString} />

Unterschiede zwischen Astro und JSX

Die Syntax der Astro-Komponenten ist eine Erweiterung von HTML. Sie wurde so entworfen, dass sie für jeden mit HTML- oder JSX-Erfahrung vertraut wirkt, aber es gibt ein paar wesentliche Unterschiede zwischen .astro-Dateien und JSX.

Attribute

In Astro verwendest du den Standard kebab-case für alle HTML-Attribute anstelle von camelCase, wie es in JSX verwendet wird. Dies gilt sogar für class, was von React nicht unterstützt wird.

<div className="box" dataValue="3" />
<div class="box" data-value="3" />

Mehrere Elemente

Eine Astro-Komponentenvorlage kann mehrere Elemente rendern, ohne dass alles in ein einzelnes <div> oder <> eingebettet werden muss, im Gegensatz zu JavaScript oder JSX.

---
// Vorlage mit mehreren Elementen
---
<p>Es ist nicht erforderlich, Elemente in einen einziges umschließendes Element einzubetten.</p>
<p>Astro unterstützt mehrere Root-Elemente in einer Vorlage.</p>

Kommentare

In Astro kannst du Standard-HTML-Kommentare oder Kommentare im JavaScript-Stil verwenden.

---
---
<!-- Die Syntax für HTML-Kommentare ist in .astro-Dateien gültig -->
{/* Die Syntax für JS-Kommentare ist ebenfalls gültig */}

Wirke mit

Community