**Проблема:** нужна кнопка, которая выглядит одинаково, но иногда это ` // Ссылка, которая выглядит как кнопка // Link из React Router, но выглядит как кнопка ``` Все три рендерят разные DOM-элементы, но визуально идентичны. **Типизация в TypeScript:** ```typescript import { ElementType, ComponentPropsWithoutRef, ReactNode } from 'react'; type ButtonOwnProps = { as?: T; variant?: 'primary' | 'secondary' | 'outline'; size?: 'sm' | 'md' | 'lg'; children: ReactNode; }; type ButtonProps = ButtonOwnProps & Omit, keyof ButtonOwnProps>; function Button({ as, variant = 'primary', size = 'md', className, children, ...props }: ButtonProps) { const Component = as || 'button'; return ( {children} ); } // TypeScript знает доступные пропсы: // button props // anchor props // Link props // Ошибка типов: // href не существует на button ``` **Text — полиморфный типографический компонент:** ```jsx function Text({ as, size = 'md', weight = 'normal', color = 'default', children, ...props }) { const Component = as || 'p'; return ( {children} ); } Заголовок Подпись Email ``` --- ## 📌 Реальные кейсы **Дизайн-системы** — Chakra UI, Mantine, MUI — все используют проп `as` или `component` для полиморфизма. ``, ``. **Навигация** — меню, где визуально одинаковые элементы могут быть ссылками, кнопками или `` в зависимости от контекста. **Radix UI** использует подход `asChild` вместо `as` — вместо рендеринга своего элемента Radix сливает пропсы в дочерний элемент: ```jsx import { Slot } from '@radix-ui/react-slot'; function Button({ asChild, ...props }) { const Component = asChild ? Slot : 'button'; return ; } // Рендерится как , но с пропсами Button ``` --- ## Частые ошибки ❌ Передавать невалидные пропсы для конкретного элемента: ```jsx // href не существует у ``` ✅ TypeScript с дженериками ловит это на этапе компиляции (см. пример `ButtonProps` выше). ❌ Забыть пробросить `...props` — теряются event handlers, aria-атрибуты и прочее. ✅ Всегда распаковывай `...props` на конечный компонент. --- ## Резюме - Polymorphic Component рендерится как разные элементы через проп `as` - Один набор стилей и логики, разный DOM на выходе - TypeScript дженерик `` обеспечивает корректные пропсы для каждого элемента - `asChild` (Radix) — альтернативный подход, сливающий пропсы в дочерний элемент через `` - Широко используется в дизайн-системах: Chakra, Mantine, MUI ---

Что такое паттерн Polymorphic Components?