Пропустить до содержимого

Синтаксис Astro

Если вы знаете HTML, то имеете уже достаточно знаний, для того, чтобы создать первый Astro компонент.

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

Вы можете определить локальные JavaScript переменные внутри frontmatter части компонента внутри двойной конструкции (---). После этого, эти переменные можно использовать внутри HTML шаблона компонента, используя JSX выражения!

Локальные переменные могут использоваться в 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 templateLiteralNameAttribute={`Значение-${name}`} />

Локальные переменные могут использоваться для динамической генерации HTML элементов:

src/components/DynamicHtml.astro
---
const items = ["Пёс", "Кот", "Утконос"];
---
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>

Astro поддерживает условное отображение HTML с использованием логических операторов и тернарных выражений JSX:

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>Покажи меня!</p>}
{visible ? <p>Покажи меня!</p> : <p>Или меня!</p>}

Вы так же можете использовать динамические теги, установив локальные переменные как имя HTML тега или ссылки на импорт компонента:

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

Как используются динамические теги:

  • Имя переменной должно быть с заглавной буквы. К примеру, используйте Element, а не element. Иначе, Astro попытается отобразить имя этой переменной как HTML тег.

  • Директивы для гидрации не поддерживаются. При использовании client:* директив гидрации (EN), Astro необходимо знать какой компонент добавлять в production сборку, а подобный паттерн препятствует корректной работе сборщика.

Astro поддерживает использование как <Fragment> </Fragment>, так и краткой записи <> </>.

Фрагменты могут быть полезны в том случае, если нужно избежать излишних обёртков при добавлении set:* directives (EN), как в следующем примере:

src/components/SetHtml.astro
---
const htmlString = '<p>HTML контент</p>';
---
<Fragment set:html={htmlString} />

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

В Astro вы используете стандартный формат kebab-case для всех HTML атрибутов вместо camelCase из JSX. Это работает, в том числе, для class атрибута, который не поддерживается в React.

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

Шаблон Astro компонента может выводить множество корневых элементов без необходимости оборачивать их все в единственный элемент, например div или <>, как делается в JavaScript или JSX.

src/components/RootElements.astro
---
// Шаблон с множественными элементами
---
<p>Нет необходимости оборачивать элементы в одиночную обёртку.</p>
<p>Astro поддерживает множественные корневые элементы в шаблоне.</p>

В Astro вы можете использовать стандартные HTML или JavaScript-подобный синтаксисы.

example.astro
---
---
<!-- Синтаксис HTML комментариев валиден в .astro файлах -->
{/* Синтаксис JS комментариев тоже валиден */}