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

Метод 1. Непосредственная передача компонента в качестве свойства:

import React from 'react';
interface Props {
  component: React.ComponentType;
}
const MyComponent: React.FC<Props> = ({ component: Component }) => {
  return <Component />;
};
// Usage
<MyComponent component={SomeComponent} />;

Метод 2. Использование реквизита рендеринга:

import React from 'react';
interface Props {
  render: (Component: React.ComponentType) => React.ReactNode;
}
const MyComponent: React.FC<Props> = ({ render }) => {
  return <>{render(SomeComponent)}</>;
};
// Usage
<MyComponent render={(Component) => <Component />} />;

Метод 3: передача компонента как элемента JSX:

import React from 'react';
interface Props {
  component: JSX.Element;
}
const MyComponent: React.FC<Props> = ({ component }) => {
  return <>{component}</>;
};
// Usage
<MyComponent component={<SomeComponent />} />;

Метод 4. Использование компонента более высокого порядка (HOC):

import React from 'react';
interface Props {
  component: React.ComponentType;
}
const withComponent = (WrappedComponent: React.ComponentType) => {
  const EnhancedComponent: React.FC = () => {
    return <WrappedComponent />;
  };
  return EnhancedComponent;
};
// Usage
const EnhancedSomeComponent = withComponent(SomeComponent);
<MyComponent component={EnhancedSomeComponent} />;

Метод 5. Передача компонента в виде строки:

import React from 'react';
interface Props {
  component: string;
}
const MyComponent: React.FC<Props> = ({ component }) => {
  const Component = componentsMap[component];
  return <>{Component && <Component />}</>;
};
// Usage
<MyComponent component="SomeComponent" />;

Метод 6. Использование динамического импорта:

import React, { lazy, Suspense } from 'react';
interface Props {
  component: string;
}
const MyComponent: React.FC<Props> = ({ component }) => {
  const LazyComponent = lazy(() => import(`./components/${component}`));
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};
// Usage
<MyComponent component="SomeComponent" />;

Метод 7. Передача компонента как дочернего:

import React from 'react';
interface Props {
  children: React.ReactNode;
}
const MyComponent: React.FC<Props> = ({ children }) => {
  return <>{children}</>;
};
// Usage
<MyComponent>
  <SomeComponent />
</MyComponent>;

Передача компонентов в качестве свойств в TypeScript обеспечивает гибкость и возможность повторного использования в ваших приложениях React. В этой статье мы рассмотрели семь различных методов, включая прямые реквизиты, реквизит рендеринга, элементы JSX, компоненты более высокого порядка, передачу в виде строки, динамический импорт и передачу в качестве дочернего элемента. У каждого метода есть свои варианты использования и преимущества, поэтому выберите тот, который лучше всего соответствует вашему конкретному сценарию.

При выборе метода не забудьте учитывать контекст и требования вашего проекта. Приятного кодирования!