Перейти к содержимому

Синтаксис Astro

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

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

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

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

src/components/Variables.astro
---
const name = "Astro";
---
<div>
<h1>Hello {name}!</h1> <!-- Outputs <h1>Hello Astro!</h1> -->
</div>

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

src/components/DynamicAttributes.astro
---
const name = "Astro";
---
<h1 class={name}>Attribute expressions are supported</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

Локальные переменные можно использовать в JSX-подобных функциях для создания динамически генерируемых HTML-элементов:

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

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

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>Show me!</p>}
{visible ? <p>Show me!</p> : <p>Else show me!</p>}

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

src/components/DynamicTags.astro
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- отображается как <div>Hello!</div> -->
<Component /> <!-- отображается как <MyComponent /> -->

При использовании динамических тегов:

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

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

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

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

src/components/SetHtml.astro
---
const htmlString = '<p>Raw HTML content</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 комментариев тоже валиден */}
Внести свой вклад

Что у вас на уме?

Сообщество