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.
Wyrażenia JSX-podobne
Dział zatytułowany Wyrażenia JSX-podobneMoż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!
Używając tego podejścia, możesz włączyć dynamiczne wartości, które są obliczane w frontmatter. Ale raz zawarte, te wartości nie są reaktywne i nigdy się nie zmienią. Komponenty Astro to szablony, które uruchamiają się tylko raz, podczas renderowania.
Poniżej zobaczysz więcej przykładów różnic między Astro a JSX.
Zmienne
Dział zatytułowany ZmienneZmienne lokalne mogą zostać dodane do kodu HTML poprzez użycie składni nawiasów klamrowych:
Atrybuty Dynamiczne
Dział zatytułowany Atrybuty DynamiczneZmienne lokalne mogą być użyte w nawiasach klamrowych do przekazywania wartości atrybutów zarówno do elementów HTML jak i komponentów:
Atrybuty HTML zostaną przekonwertowane na stringi, więc nie jest możliwe przekazywanie funkcji i obiektów do elementów HTML. Na przykład, nie możesz przypisać obsługi zdarzeń do elementu HTML w komponencie Astro:
Zamiast tego, użyj skryptu po stronie klienta, aby dodać obsługę zdarzeń. Zupełnie jakbyś to zrobił w czystym JavaScript:
Dynamiczny HTML
Dział zatytułowany Dynamiczny HTMLZmienne lokalne mogą zostać użyte w funkcjach JSX-podobnych do stworzenia dynamicznie generowanych elementów HTML:
Astro może warunkowo wyświetlać HTML używając operatorów logicznych JSX oraz wyrażeń warunkowych.
Dynamiczne Tagi
Dział zatytułowany Dynamiczne TagiMożesz również używać dynamicznych tagów przypisując nazwę tagu HTML do zmiennej lub poprzez ponowne przypisanie importu komponentu:
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 nieelement
. 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.
Fragmenty
Dział zatytułowany FragmentyAstro 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:
Różnice między Astro a JSX
Dział zatytułowany Różnice między Astro a JSXSkł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.
Atrybuty
Dział zatytułowany AtrybutyW 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.
Wiele Elementów
Dział zatytułowany Wiele ElementówSzablon komponentu Astro może renderować wiele elementów bez potrzeby zawarcia wszystkiego w jednym tagu <div>
lub <>
, inaczej niż w JavaScript czy JSX.
Komentarze
Dział zatytułowany KomentarzeW Astro możesz używać standardowych komentarzy HTML lub komentarza w stylu JavaScript.
Komentarze w stylu HTML zostaną dołączone do DOM przeglądarki, podczas gdy te w stylu JS zostaną pominięte. Aby zostawić wiadomości TODO lub inne wyjaśnienia tylko dla deweloperów, możesz użyć komentarzy w stylu JavaScript.