🚀 Полиморфный компонент в React Всем привет! 👋 Полиморфный компонент — это компонент, который может изменять своё поведение или HTML-элемент (тег) в зависимости от переданных пропсов. Это удобно, когда нужно создать гибкий и переиспользуемый UI-компонент, например, кнопку, которая может быть button, a, или div в зависимости от ситуации. 🔹 Пример создания полиморфного компонента Рассмотрим пример, где мы создаём кнопку, которая может рендериться как button или a:

import React from "react";

type PolymorphicProps<E extends React.ElementType> = {
  as?: E; // Тип HTML-элемента или компонента
} & React.ComponentProps<E>; // Наследуем все стандартные пропсы элемента

const PolymorphicComponent = <E extends React.ElementType = "button">({
  as,
  children,
  ...props
}: PolymorphicProps<E>) => {
  const Component = as || "button"; 
  return <Component {...props}>{children}</Component>;
};

const App = () => {
  return (
    <>
      <PolymorphicComponent onClick={() => alert("Button clicked!")}>
        Кнопка
      </PolymorphicComponent>

      <PolymorphicComponent as="a" href="https://react.dev">
        Ссылка
      </PolymorphicComponent>
    </>
  );
};

export default App;

🔹 Как это работает: 1. Проп as: Указывает, какой элемент нужно отрендерить. Например, button, a, div. 2. Типизация: Используем дженерики (<E extends React.ElementType>), чтобы автоматически применять подходящие типы пропсов для выбранного элемента. 3. Гибкость: Компонент можно легко адаптировать под любой HTML-элемент или даже другой React-компонент. 🔹 Почему это полезно: - Повторное использование: Один и тот же компонент может выполнять разные роли (ссылка, кнопка, заголовок и т.д.). - Универсальность: Удобно для библиотек UI-компонентов, где важна максимальная кастомизация. - Читаемость: Код остаётся более понятным и предсказуемым. 🎯 Заключение Этот подход особенно полезен при создании библиотек компонентов, где большинство компонентов полиморфны. Вы можете адаптировать этот шаблон под свои нужды и создать компоненты, которые поддерживают уникальные стили или функциональность. ReactJs Daily | #shortinfo