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-podobne

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!

Dynamiczne vs Reaktywne

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 Zmienne

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>

Atrybuty Dynamiczne

Dział zatytułowany Atrybuty Dynamiczne

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}`} />

Uwaga

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:

tego-nie-rob.astro

---
function handleClick () {
    console.log("Przycisk został kliknięty!");
}
---
<!-- ❌ To nie zadziała! ❌ -->
<button onClick={handleClick}>Nic się nie stanie, gdy mnie klikniesz!</button>

Zamiast tego, użyj skryptu po stronie klienta, aby dodać obsługę zdarzeń. Zupełnie jakbyś to zrobił w czystym JavaScript:

lepiej-zrob-to-tak.astro

---
---
<button id="button">Click Me</button>
<script>
  function handleClick () {
    console.log("Przycisk został kliknięty!");
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

Dynamiczny HTML

Dział zatytułowany Dynamiczny HTML

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>}

Dynamiczne Tagi

Dział zatytułowany Dynamiczne Tagi

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.

Fragmenty

Dział zatytułowany Fragmenty

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} />

Różnice między Astro a JSX

Dział zatytułowany Różnice między Astro a JSX

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.

Atrybuty

Dział zatytułowany Atrybuty

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" />

Wiele Elementów

Dział zatytułowany Wiele Elementów

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>

Komentarze

Dział zatytułowany Komentarze

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 */}

Uwaga

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.