Zum Inhalt springen

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.

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!

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

src/components/Variables.astro
---
const name = "Astro";
---
<div>
<h1>Hallo {name}!</h1> <!-- entspricht <h1>Hallo Astro!</h1> -->
</div>

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

src/components/DynamicAttributes.astro
---
const name = "Astro";
---
<h1 class={name}>Attribute expressions are supported</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

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

src/components/DynamicHtml.astro
---
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.

src/components/ConditionalHtml.astro
---
const sichtbar = true;
---
{sichtbar && <p>Zeige mich!</p>}
{sichtbar ? <p>Zeige mich!</p> : <p>Zeige mich sonst!</p>}

Du kannst auch dynamische Tags verwenden, indem du eine Variable auf einen HTML-Tag-Namen oder einen Komponentenimport setzt:

src/components/DynamicTags.astro
---
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.

Astro unterstützt die Verwendung von <Fragment> </Fragment> oder der Kurzform <> </>.

Fragments können nützlich sein, um Wrapper-Elemente zu vermeiden, wenn set:*-Anweisungen (EN) hinzugefügt werden, wie im folgenden Beispiel:

src/components/SetHtml.astro
---
const htmlString = '<p>Roher HTML-Inhalt</p>';
---
<Fragment set:html={htmlString} />

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.

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.

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

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

src/components/RootElements.astro
---
// 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>

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

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