Пропсы

Пропсы (props, от properties — свойства) — данные, которые компонент получает снаружи, через атрибуты тега. Благодаря им один компонент карточки статьи может показать любую статью: заголовок и дату ему передаёт страница.

Приём пропсов

Внутри компонента пропсы лежат в объекте Astro.props. Создайте src/components/PostCard.astro:

---
const { title, url } = Astro.props;
---
 
<article>
  <h2><a href={url}>{title}</a></h2>
</article>

Компонент берёт из Astro.props два значения деструктуризацией и выводит ссылку с заголовком статьи.

Передача пропсов

Значения передают атрибутами, как в HTML. Откройте src/pages/posts/index.astro (создайте его, если файла ещё нет):

---
import PostCard from '../../components/PostCard.astro';
---
 
<h1>Статьи</h1>
<PostCard title="Первая статья" url="/posts/first-post" />
<PostCard title="Как я учу Astro" url="/posts/learning-astro" />

Откройте http://localhost:4321/posts — появятся две карточки со ссылками. Строки передают в кавычках, а всё остальное — числа, массивы, объекты, переменные — в фигурных скобках: count={3}, tags={['astro', 'css']}.

Тип пропсов

Если описать во фронтматтере интерфейс Props, редактор будет подсказывать имена и проверять типы. Обновите src/components/PostCard.astro:

---
interface Props {
  title: string;
  url: string;
  date?: Date;
}
 
const { title, url, date } = Astro.props;
---
 
<article>
  <h2><a href={url}>{title}</a></h2>
  {date && <time datetime={date.toISOString()}>{date.toLocaleDateString('ru-RU')}</time>}
</article>

Знак вопроса делает пропс date необязательным. Если забыть передать title, редактор подчеркнёт тег, а команда npx astro check выведет ошибку в терминале.

Значения по умолчанию

Значение по умолчанию задают прямо в деструктуризации:

---
interface Props {
  title: string;
  url: string;
  label?: string;
}
 
const { title, url, label = 'Читать' } = Astro.props;
---
 
<article>
  <h2>{title}</h2>
  <a href={url}>{label}</a>
</article>

Карточка без атрибута label покажет ссылку «Читать», а label="Подробнее" заменит текст.

Частая ошибка

Число передают в кавычках: count="3". Компонент получает строку "3", и выражение count + 1 даёт "31" вместо 4. Всё, что не является строкой, передавайте в фигурных скобках: count={3}.