Полиморфные компоненты: проп as против asChild и Slot

Одно поведение, много элементов

Нужда универсальна для дизайн-систем: Button должен быть иногда button, иногда a, иногда роутерным Link — те же отступы, то же кольцо фокуса, те же состояния нажатия. Наивные ответы все неверны. Вложенность (a вокруг button) — невалидный HTML со сломанной семантикой: интерактивное внутри интерактивного путает любую вспомогательную технологию. Копирование стилей во второй компонент дрейфует за квартал. Навесить onClick со стилями на div — потерять активацию с клавиатуры, фокус и дерево доступности целиком. Реальных опций две: сменить то, что компонент рендерит (проп as) или усыновить элемент, который вызывающий уже написал (asChild).

Проп as и счёт, который выставляет TypeScript

В рантайме as — почти ничто:

function Box({ as, ...props }) {
  const Comp = as ?? "div";
  return <Comp {...props} />;
}
// <Box as="a" href="/docs">Docs</Box>  →  рендерит <a href="/docs">

Вся стоимость живёт в типах. Корректный полиморфный компонент обязан сказать: «мои пропсы — это мои собственные, плюс пропсы элемента, названного в as, минус коллизии — и мой ref типизирован под тот элемент». Последняя оговорка — самая печально известная: тип ref выводится на каждый колл-сайт (ComponentPropsWithRef<E>["ref"]), а тип пропсов — условный/отображённый тип по E extends ElementType. Это работает, и каждая утилитарная библиотека с такой фичей несёт страницы оговорок — потому что стоимость инстанцирования растёт с колл-сайтами. Каждый <Box as={...}> заставляет компилятор разрешать условный тип по полной карте элементов; на тысячах колл-сайтов это измеримое время tsc и видимая задержка редактора, а сообщения об ошибках перестают называть ваш код и начинают называть типовую машинерию. Есть и семантическая ловушка, которую типы не ловят: поведенческие пропсы компонента могут ничего не значить на новом элементе — disabled на анкоре нативно не делает ничего, и компонент должен либо транслировать его (aria-disabled, заблокированные обработчики), либо честно не поддерживать. Честный вердикт: as — правильный инструмент для стилевых примитивов — Box, Text, Stack, — где собственных пропсов мало, поведения нет, а полиморфизм — чисто про то, какой тег несёт стили.

asChild и Slot: композиция вместо типовой гимнастики

Альтернативу популяризовал Radix. С asChild компонент не рендерит собственного элемента — он рендерит Slot, а Slot клонирует своего единственного ребёнка, вливая в него пропсы компонента:

<Button asChild>
  <Link to="/billing">Upgrade</Link>
</Button>
// Рендерится ОДИН элемент: <a> от Link, теперь несущий
// className, data-атрибуты, обработчики и ref от Button.

Внутри Button делает const Comp = asChild ? Slot : "button". Slot берёт элемент-ребёнка и производит клон со слитыми пропсами — механика важна, потому что вы будете её отлаживать:

• className: конкатенируется — выживают классы и слота, и ребёнка.
• style: объекты сливаются, свойства ребёнка побеждают при коллизии.
• обработчики событий: цепочкой, ребёнок первым — сначала onClick ребёнка, потом слота. Хорошо построенные примитивы компонуют с проверкой defaultPrevented, так что ребёнок, вызвавший event.preventDefault(), может остановить собственную логику примитива; наивное слияние выполняет оба безусловно — так и уезжают в прод баги двойного срабатывания.
• ref: компонуется — callback-ref, заполняющий и родительский, и детский. React 19 заметно это упростил: ref теперь обычный проп функциональных компонентов, и слияние больше не требует обёрток forwardRef или доступа к element.ref (устаревший путь, предупреждавший ещё в React 18).

Что покупает этот контракт: никакой типовой гимнастики — у Button остаются свои простые пропсы, у ребёнка свои; TypeScript проверяет стороны раздельно. Цена — два новых режима отказа. Несколько детей бросают исключение: Slot обязан клонировать ровно один элемент (React.Children.only), поэтому <Button asChild><Icon /><span>Save</span></Button> — ошибка рантайма; оберните их в один элемент. И ребёнок должен сотрудничать: Slot вливает пропсы в элемент ребёнка, но если ребёнок — кастомный компонент, игнорирующий незнакомые пропсы (рендерит свой span без спреда), каждый слитый обработчик, ARIA-атрибут и ref молча испаряются. Виджет выглядит правильно и не делает ничего; отладочный ход — инспекция DOM на ожидаемые атрибуты data-state/aria-*.

Выбор: as примитивам, asChild поведению

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

• as — стилевым примитивам. Box, Text, Stack, Grid: поведения нет, собственных пропсов мало, инференс мелкий. Полиморфизм — это «какой тег несёт эти стили»: as="section", as="label". Держите допустимое объединение узким (intrinsic-элементы, может пара компонентов) — и счёт TypeScript останется маленьким.
• asChild — поведенческим обёрткам. Button, Tooltip.Trigger, Dialog.Trigger, DropdownMenu.Trigger: богатое поведение (обработчики, ARIA, фокус), и элемент вызывающего часто сам компонент (роутерный Link) со своими пропсами. asChild целиком обходит взрыв типов и компонует поведения — Tooltip.Trigger asChild поверх Dialog.Trigger asChild поверх вашего Button складывает три набора поведения на один отрендеренный элемент, чего as не выражает вовсе.

Остающаяся дисциплина — документация: asChild-API обязан громко проговаривать контракт ребёнка — ровно один элемент-ребёнок; ребёнок должен спредить незнакомые пропсы и принимать ref. Дизайн-системы, пропустившие этот абзац, порождают стабильный поток тикетов «тултип молча не открывается» от команд, чей компонент-ребёнок проглотил слияние.