Render-свойства со сниппетами
Передавайте логику отображения как свойства-сниппеты, чтобы инвертировать управление и повысить гибкость.
«Render-свойства со сниппетами» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Шаблон свойств отрисовки
Свойства отрисовки позволяют родителю передавать дочернему компоненту логику отрисовки. В Svelte 5 для этого естественно использовать сниппеты.
Передача сниппета
Родитель определяет сниппет и передаёт его как свойство.
<!-- Parent -->
{#snippet item(thing)}
<li>{thing.name}</li>
{/snippet}
<List items={data} {item} />Отрисовка в дочернем компоненте
Дочерний компонент вызывает сниппет с аргументами для каждого элемента.
<!-- List.svelte -->
let { items, item } = $props();
{#each items as thing}
{@render item(thing)}
{/each}Инверсия управления
Этот шаблон инвертирует управление: дочерний компонент решает, когда выполнять отрисовку, а родитель — что именно отрисовывать.
Повторное использование
Один компонент List может отрисовывать что угодно: товары, пользователей, публикации.
TypeScript
Типизируйте параметр сниппета для безопасности на этапе компиляции и автодополнения в среде разработки.
Сравнение со слотами
Сниппеты мощнее: они принимают аргументы, могут использоваться условно и типизируются.
Старый шаблон: свойства слотов
В Svelte 4 были свойства слотов (let:thing). Сниппеты обобщают и заменяют этот подход.
Несколько сниппетов
Передавайте несколько сниппетов, чтобы создавать более сложные интерфейсы (заголовок, элемент, нижний колонтитул).
Компоненты без разметки
Свойства отрисовки лежат в основе библиотек компонентов без разметки, которые поставляют логику, а не стили.
Случаи использования
Таблицы, списки, прокрутка с виртуализацией, автодополнение, календари.
Быстрая проверка
Какую проблему решают свойства отрисовки?
Итоги
Свойства отрисовки через сниппеты инвертируют управление. Родители передают отрисовку, а дочерние компоненты задают структуру и момент выполнения.
Часто задаваемые вопросы
Урок «Render-свойства со сниппетами» бесплатный?
Да — полный текст урока «Render-свойства со сниппетами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Render-свойства со сниппетами»?
Передавайте логику отображения как свойства-сниппеты, чтобы инвертировать управление и повысить гибкость. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Render-свойства со сниппетами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Render-свойства со сниппетами
- Компоненты высшего порядка
- Шаблон Builder для headless-интерфейсов
- Составные компоненты с контекстом