Полиморфные React компоненты
ฝัง
- เผยแพร่เมื่อ 27 ก.ย. 2022
- Универсальные React компоненты могут принимать разный набор просов и отрисовывать в разметку компоненты с разными тегами. Например, кнопка может быть как button, так и ссылкой, или даже div или span. TypeScript помогает упростить создания подобного рода компоненты. Разбираемся как именно.
Код из видео codesandbox.io/s/romantic-vau...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
большое спасибо за концентрат настолько понятной и важной информации, было бы интересно посмотреть что-то из ряда "типичные ошибки при работе с ts"для понимания лучших практик
Топовая вещь! Полиморфные компоненты это must have для тех кто пилит свой ui kit.
Очень полезные уроки для освоения TypeScript!
Typescript творит чудеса... Спасибо за видео, Михаил!
Михаил, спасибо за ваши видео!
Спасибо за простое пояснение сложных вещей! 🔥🔥🔥
Пожалуйста не забрасывайте.
Красава! Спасибо за такой контент, все доходчиво и без воды. Побольше бы видосов по ts
очень хорошее видео, показал очень много продвинутого(на мой взгляд) тайпскрипта.
в ютубе много видосов где поверхностно цитируется документация
но здесь мы можем увидеть как эти штуки могут работать вместе
Большое спасибо за видео! Было очень полезно, посмотрев, смог решить старую проблему с полиморфным компонентом в библиотеке.
Михаил, спасибо. Годнота за годнотой
реально лучший!👍👏
я так давно это искал! спасибо :)
Как всегда, вижу ролик Михаила и понимаю, что время будет проведено с пользой =) Спасибо за материал!
Это прям супер видео! Михаил спасибо, если можно побольше такого рода видео!
Фантастика!
Спасибо за видео! На самом деле полноценная реализация такого компонента это задача на несколько дней, но за контент большое спасибо, тема очень полезная.
Действительно полезный материал. Когда сам делал подобное, пришлось ручками выводить типы для атрибутов из IntrinsicElements, так как не заметил более удобных и готовых типов.
спасибо, полезно
Топ!
Это просто взрыв мозга! Наконец-то без флагов и ветвлений перепишу все кнопки
🔥
Крутые видосы для продвижения пацанов из начинающий мидлов далее
я бы еще экспортировал пропсы -- ибо если потом проекте надо будет сделать обертку над таким компонентом -- придется менять код, который уже написать, что нарушение open-close principle
👍
Спасибо за видео.
Кроме пропса as такие возможности полиморфизма можно провернуть через другой пропс? Например пропсы зависят от значения пропса multiple (true|false).
Какой классный контент и так мало просмотров.
Интересно, можно ли избавиться в текстовом компоненте (9:34) от трехкратного употребления в дженериках "E extends ElementType"?
Кстати, мне кажется, что можно убрать дефолтное присвоение дженерику в строке 3, а в строке 9 не использовать этот дефолт, а явно указать уже имеющийся в этом выражении дженерик: "keyof TextOwnProps".
Дружище, один момент, в React, для создания компонента, используется функция createElement а не , так не правильно делать. В остальном, спасибо, очень и очень полезный для меня видеоролик!
Давайте про модульный подход в реакт
странно, для as="button" не определяется тип для onClick ивента: Parameter 'e' implicitly has an 'any' type.ts(7006).
Я делал через: type HTMLElementProps = Parameters[0] , но по ощущением медленнее работает
Михаил, у вас нет в планах адаптации ваших курсов по Реакт и Редакс на тайпскрипт?
Тот же материал, но с увеличенной ценой за бонус ввиде типизации.
Я только в этом месяце выпустил курс по ts, где в том числе есть блоки по реакт и редакс. Сами курсы по реакт и редакс останутся пока на js.
Привет, есть одно НО - если оборачивать это в (например: memo(Component)) это будет работать с поправкой на те элементы которые у вас в BaseProps, а в otherProps не чего не придёт, так-как условная "E" у вас не попадает в фии memo.
Это далеко не единственная проблема с такой простой реализацией. Вероятно также будут проблемы с тем, что мы не сможем передать ref и даже если захотим, то придется переписывать много кода. Также под вопросом передача event handler'ов. А что если мы захотим передать в компонент-кнопку из реакт-роутера? А что если компонент-consumer нашего компонента передает className, при этом внутри самого компонента уже есть какой-то className? Как вообще стили className родителя, styles родителя, event handler'ы родителя будут сливаться с теми же пропсами в базовом компоненте? Иными словами релизация такого компонента на TS это ОЧЕНЬ сложная задача. Код который здесь написан, вряд ли пошёл бы в продакшн.
@Михаил Непомнящий подскажите как сюда в этот компонет прокинуть ref
5:21 typeof defaultElement - это ведь будут string, разве нет?! зачем это вообще??
Не совсем. Типом будет литерал. И если значение потом изменится, то и тип будет другим
здравствуйте,а курс по тайпскрипту состоит из 6 видео?
Здравствуйте. Смотря о чем вы спрашиваете. Если про материалы на TH-cam, то здесь у меня 2 плейлиста - один про основы, второй про реакт (включая это видео). Есть 13-часовой курс по ts, опубликованный мной на Степике и на udemy. Актуальные ссылки всегда есть на моем сайте mishanep.com
@@mishanep спасибо большое
Здравствуйте Михаил, сделайте пожалуйста видеоролик про все хули реакта
🤣
хм не знаю как сделать Link от react router dom или button
База.
что-то на умном
пример с текстом странный, в чем смысл создавать отдельный компонент для текста, если захочешь изменить div на h1 или на label это и без компонента можно сделать
Это же пример. В реальности, обычно, компонент text содержит дополнительную логику со стилизацией текста. Чтобы ее переиспользовать как раз и нужны полиморфные компоненты.
Читерство)