Salta ai contenuti

Sintassi Astro

Se conosci l’HTML, ne sai già abbastanza per scrivere il tuo primo componente Astro.

La sintassi del componente Astro è un superset di HTML. La sintassi è stata progettata per risultare familiare a chiunque abbia esperienza nella scrittura di HTML o JSX e aggiunge il supporto per includere componenti ed espressioni JavaScript.

Puoi definire variabili JavaScript locali all’interno dello script del componente frontmatter tra i due separatori del codice (---) di un componente Astro. Puoi quindi inserire queste variabili nel modello HTML del componente utilizzando espressioni simili a JSX!

Le variabili locali possono essere aggiunte all’HTML utilizzando la sintassi delle parentesi graffe:

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

Le variabili locali possono essere utilizzate tra parentesi graffe per passare i valori degli attributi sia agli elementi che ai componenti HTML:

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

Le variabili locali possono essere utilizzate in funzioni simili a JSX per produrre elementi HTML generati dinamicamente:

src/components/DynamicHtml.astro
---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>

Astro può visualizzare in modo condizionale l’HTML utilizzando gli operatori logici JSX e le espressioni ternarie.

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>Show me!</p>}
{visible ? <p>Show me!</p> : <p>Else show me!</p>}

Puoi anche utilizzare tag dinamici impostando una variabile sul nome di un tag HTML o sull’importazione di un componente:

src/components/DynamicTags.astro
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- renders as <div>Hello!</div> -->
<Component /> <!-- renders as <MyComponent /> -->

Quando si utilizzano tag dinamici:

  • I nomi delle variabili devono essere scritti in maiuscolo. Ad esempio, utilizza Element, non element. Altrimenti, Astro proverà a rendere il nome della tua variabile come un tag HTML letterale.

  • Le direttive di idratazione non sono supportate. Quando si utilizzano le direttive di idratazione client:*, Astro deve sapere quali componenti raggruppare per la produzione e il modello di tag dinamico ne impedisce il funzionamento.

Astro supporta l’uso di <Fragment> </Fragment> o della abbreviazione <> </>.

I frammenti possono essere utili per evitare elementi wrapper quando si aggiungono direttive set:* (EN), come nell’esempio seguente:

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

La sintassi del componente Astro è un superset di HTML. È stato progettato per risultare familiare a chiunque abbia esperienza con HTML o JSX, ma ci sono un paio di differenze fondamentali tra i file “.astro” e JSX.

In Astro, utilizzi il formato standard “kebab-case” per tutti gli attributi HTML invece del formato “camelCase” utilizzato in JSX. Funziona anche per “class”, che non è supportato da React.

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

Un modello di componente Astro può eseguire il rendering di più elementi senza la necessità di racchiudere tutto in un singolo <div> o <>, a differenza di JavaScript o JSX.

src/components/RootElements.astro
---
// Template with multiple elements
---
<p>No need to wrap elements in a single containing element.</p>
<p>Astro supports multiple root elements in a template.</p>

In Astro, puoi utilizzare commenti HTML standard o commenti in stile JavaScript.

example.astro
---
---
<!-- HTML comment syntax is valid in .astro files -->
{/* JS comment syntax is also valid */}