Przejdź do głównej zawartości

Składnia Astro

Jeśli znasz HTML to wiesz już wystarczająco dużo, aby napisać swój pierwszy komponent Astro.

Składnia komponentu Astro jest nadzbiorem HTML. Została zaprojektowana tak, aby była znajoma dla każego, kto ma doświadczenie w pisaniu HTML lub JSX, i dodaje wsparcie dla włączania komponentów oraz wyrażeń JavaScript.

Możesz zdefiniować zmienne lokalne JavaScript w środku skryptu modułu frontmatter pomiędzy dwoma znacznikami kodu komponentu Astro (---). Możesz wstawić te zmienne do szablonu HTML komponentu za pomocą wyrażeń JSX-podobnych!

Zmienne lokalne mogą zostać dodane do kodu HTML poprzez użycie składni nawiasów klamrowych:

src/components/Variables.astro
---
const name = "Astro";
---
<div>
<h1>Witaj {name}!</h1> <!-- Wyświetli się <h1>Witaj Astro!</h1> -->
</div>

Zmienne lokalne mogą być użyte w nawiasach klamrowych do przekazywania wartości atrybutów zarówno do elementów HTML jak i komponentów:

src/components/DynamicAttributes.astro
---
const name = "Astro";
---
<h1 class={name}>Wyrażenia atrybutów są wspierane</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

Zmienne lokalne mogą zostać użyte w funkcjach JSX-podobnych do stworzenia dynamicznie generowanych elementów HTML:

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

Astro może warunkowo wyświetlać HTML używając operatorów logicznych JSX oraz wyrażeń warunkowych.

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>Pokaż mnie!</p>}
{visible ? <p>Pokaż mnie!</p> : <p>W innym przypadku pokaż mnie!</p>}

Możesz również używać dynamicznych tagów przypisując nazwę tagu HTML do zmiennej lub poprzez ponowne przypisanie importu komponentu:

src/components/DynamicTags.astro
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Cześć!</Element> <!-- Renderuje się jako <div>Cześć!</div> -->
<Component /> <!-- Renderuje się jako <MyComponent /> -->

Kiedy używasz dynamicznych tagów, pamiętaj o kilku rzeczach:

  • Nazwy zmiennych pisz z dużej litery. Na przykład, użyj Element, a nie element. W przeciwnym razie Astro wyrenderuje Twoją nazwę zmiennej jako zwykły tag HTML.
  • Dyrektywy nawadniania nie są wspierane Jeśli korzystasz z dyrektyw nawadniania client:*, Astro musi wiedzieć, który komponent zapakować na produkcję, a wzór dynamicznego tagu zapobiega jemu działaniu.

  • Dyrektywa define:vars nie jest wspierana. Jeśli nie możesz owinąć elementów potomnych dodatkowym elementem (np. <div>), możesz ręcznie dodać style={`--myVar:${value}`} do swojego elementu.

Astro wspiera używanie <Fragment> </Fragment> bądź skróconej formy <> </>.

Fragmenty mogą być użyte do uniknięcia dodawania elementów pakujących, kiedy dodajesz dyrektywy set:*, jak w poniższym przykładzie:

src/components/SetHtml.astro
---
const htmlString = '<p>Surowa zawartość HTML</p>';
---
<Fragment set:html={htmlString} />

Składnia komponentu Astro jest nadzbiorem HTML. Została zaprojektowana tak, aby była znajoma dla każdego, kto ma doświadczenie w HTML lub JSX, jednak istnieje kilka kluczowych różnic między plikami .astro a JSX.

W Astro używasz standardowego formatu kebab-case dla wszystkich atrybutów HTML zamiast camelCase używanego w JSX. Działa to nawet dla klas, które nie są obsługiwane przez React.

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

Szablon komponentu Astro może renderować wiele elementów bez potrzeby zawarcia wszystkiego w jednym tagu <div> lub <>, inaczej niż w JavaScript czy JSX.

src/components/RootElements.astro
---
// Szablon z wieloma elementami
---
<p>Nie ma potrzeby zawierania elementów w jednym kontenerze.</p>
<p>Astro wspiera wiele elementów root w szablonie.</p>

W Astro możesz używać standardowych komentarzy HTML lub komentarza w stylu JavaScript.

example.astro
---
---
<!-- Składnia komentarza HTML jest prawidłowa dla plików .astro -->
{/* Tak samo jak i składnia JS */}
Pomóż nam

Jak chcesz ją przekazać?

Otwórz Issue na GitHubie

Najszybszy sposób na powiadomienie nas o problemie.

Społeczność