Справочник выражений в шаблонах

Синтаксис компонентов Astro является надмножеством HTML. Он разработан так, чтобы быть знакомым всем, кто работал с HTML или JSX, и добавляет поддержку компонентов и JavaScript-выражений.

JSX-подобные выражения

Вы можете определять локальные переменные JavaScript внутри скрипта компонента (блок метаданных между ---) и вставлять их в HTML-шаблон с помощью фигурных скобок!

Динамические vs реактивные

Этот подход позволяет выводить динамические значения, вычисляемые при рендеринге. Однако эти значения не являются реактивными: они никогда не изменятся после того, как страница была отправлена пользователю. Компоненты Astro выполняются только один раз на сервере.

Переменные

Локальные переменные вставляются в HTML с помощью синтаксиса фигурных скобок:

src/components/Variables.astro

---
const name = "Astro";
---
<div>
  <h1>Привет, {name}!</h1>  <!-- Вывод: <h1>Привет, Astro!</h1> -->
</div>

Динамические атрибуты

Переменные можно использовать для передачи значений атрибутов как обычным HTML-элементам, так и компонентам:

src/components/DynamicAttributes.astro

---
const name = "Astro";
---
<h1 class={name}>Поддержка выражений в атрибутах</h1>

<MyComponent name={`МоёИмя${name}`} />

Осторожно

Атрибуты HTML преобразуются в строки, поэтому в них нельзя передавать функции. Например, нельзя назначить обработчик события прямо в шаблоне:

<!-- ❌ Это не сработает! ❌ -->
<button onClick={handleClick}>Ничего не произойдет</button>

Вместо этого используйте тег <script>, как в обычном JavaScript:

<button id="button">Нажми меня</button>
<script>
  document.getElementById("button").addEventListener("click", () => console.log("Клик!"));
</script>

Динамический HTML

Вы можете использовать стандартные функции JavaScript (например, .map()) для генерации списков элементов:

---
const items = ["Собака", "Кот", "Утконос"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

Astro поддерживает условный рендеринг через логические операторы и тернарные выражения:

---
const visible = true;
---
{visible && <p>Я виден!</p>}

{visible ? <p>Да</p> : <p>Нет</p>}

Динамические теги

Вы можете использовать переменные в качестве имен тегов. Имя переменной обязательно должно начинаться с большой буквы:

---
import MyComponent from "./MyComponent.astro";
const Element = 'div';
const Component = MyComponent;
---
<Element>Привет!</Element> <!-- отрендерится как <div>Привет!</div> -->
<Component /> <!-- отрендерится как <MyComponent /> -->

Фрагменты (Fragments)

Astro поддерживает синтаксис <> </> и встроенный компонент <Fragment />. Это полезно, когда нужно сгруппировать элементы без добавления лишнего <div> в итоговый HTML.

---
const htmlString = '<p>Сырой HTML контент</p>';
---
<Fragment set:html={htmlString} />

Утилиты компонентов

Astro.slots

Содержит функции для работы с дочерними элементами (слотами).

Astro.slots.has()

Проверяет, передан ли контент в конкретный слот. Полезно для условного рендеринга оберток.

{Astro.slots.has('more') && (
  <aside>
    <slot name="more" />
  </aside>
)}

Astro.slots.render()

Позволяет асинхронно отрендерить содержимое слота в строку HTML.

---
const html = await Astro.slots.render('default');
---
<Fragment set:html={html} />

Astro.self

Позволяет компоненту вызывать самого себя рекурсивно. Это удобно для отрисовки древовидных структур данных.

---
const { items } = Astro.props;
---
<ul>
  {items.map((item) => (
    <li>
      {Array.isArray(item) ? <Astro.self items={item} /> : item}
    </li>
  ))}
</ul>