Полиморфные React компоненты

Универсальные React компоненты могут принимать разный набор просов и отрисовывать в разметку компоненты с разными тегами. Например, кнопка может быть как button, так и ссылкой, или даже div или span. TypeScript помогает упростить создания подобного рода компоненты. Разбираемся как именно.

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[ggindinson]

большое спасибо за концентрат настолько понятной и важной информации, было бы интересно посмотреть что-то из ряда "типичные ошибки при работе с ts"для понимания лучших практик

[c]

Михаил, спасибо за ваши видео!
Спасибо за простое пояснение сложных вещей! 🔥🔥🔥
Пожалуйста не забрасывайте.

[denis]

Красава! Спасибо за такой контент, все доходчиво и без воды. Побольше бы видосов по ts

[victormog]

Очень полезные уроки для освоения TypeScript!

[YuryKorotovskikh]

Большое спасибо за видео! Было очень полезно, посмотрев, смог решить старую проблему с полиморфным компонентом в библиотеке.

[bagga_lev]

Как всегда, вижу ролик Михаила и понимаю, что время будет проведено с пользой =) Спасибо за материал!

[thats_embarrassing_JS]

Typescript творит чудеса... Спасибо за видео, Михаил!

[АнатолийГорбов-оь]

Это прям супер видео! Михаил спасибо, если можно побольше такого рода видео!

[роматарасов-ол]

очень хорошее видео, показал очень много продвинутого(на мой взгляд) тайпскрипта.
в ютубе много видосов где поверхностно цитируется документация
но здесь мы можем увидеть как эти штуки могут работать вместе

[Pavel-wjgy]

Спасибо за видео! На самом деле полноценная реализация такого компонента это задача на несколько дней, но за контент большое спасибо, тема очень полезная.

[profesor]

Действительно полезный материал. Когда сам делал подобное, пришлось ручками выводить типы для атрибутов из IntrinsicElements, так как не заметил более удобных и готовых типов.

[vadim_tech]

Топовая вещь! Полиморфные компоненты это must have для тех кто пилит свой ui kit.

[dreadwood]

Это просто взрыв мозга! Наконец-то без флагов и ветвлений перепишу все кнопки

[snatvb]

Крутые видосы для продвижения пацанов из начинающий мидлов далее
я бы еще экспортировал пропсы -- ибо если потом проекте надо будет сделать обертку над таким компонентом -- придется менять код, который уже написать, что нарушение open-close principle

[XiaoRenMeishi]

Михаил, у вас нет в планах адаптации ваших курсов по Реакт и Редакс на тайпскрипт?
Тот же материал, но с увеличенной ценой за бонус ввиде типизации.

[mmm-mt]

Дружище, один момент, в React, для создания компонента, используется функция createElement а не <TagName />, так не правильно делать. В остальном, спасибо, очень и очень полезный для меня видеоролик!

[cheesecheesson]

Какой классный контент и так мало просмотров.

[ЕгорЛазука-йэ]

Спасибо за видео.

Кроме пропса as такие возможности полиморфизма можно провернуть через другой пропс? Например пропсы зависят от значения пропса multiple (true|false).

[constantine]

5:21 typeof defaultElement - это ведь будут string, разве нет?! зачем это вообще??

[apyrkh]

странно, для as="button" не определяется тип для onClick ивента: Parameter 'e' implicitly has an 'any' type.ts(7006).
Я делал через: type HTMLElementProps<T extends keyof React.ReactHTML> = , но по ощущением медленнее работает