React и Typescript: Создание динамического компонента на примере кнопки

[divinity2000]

Было бы интересней если в качестве компонента можно было передать элемент со своими пропсами и уже в него инжектить события (этакий HOC)
т.е:

<Button component={<OtherComponent componentProp />} {...props}>
  Content
</Button>

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

[progammer]

В официальной документации реакта это описано.

[divinity2000]

Ну, createElement и нативный есть, так что если убрать отсюда TS, то статья теряет смысл, так как это все тоже описано в доке)

[Alexandroppolus]

У этого подхода есть досадный минус: не работает проверка типов. Любое выражение вида < Comp ... /> возвращает тип JSX.Element, и Тайпскрипту непонятно, какие там пропсы, т.е. что туда можно и что нельзя.

[Fines_Unes]

Немного не понял проблему, где именно не работает проверка типов? Можете накидать пример?

[Alexandroppolus]

type Props1 = {p: number};
const Comp1: FC<Props1> = (props) => {...};

type Props2 = {p: string};
const Comp2: FC<Props2> = (props) => {...};
                                      
type Props3 = {
  element: ReactElement<Props1>;
}
const Comp3: FC<Props3> = ({element}) => {
    // .....
    return (
      <> 
        ... 
        {cloneElement(element, {p: 123})}
        ...
      </>
    );
};
// где-то в tsx
...
<Comp3 element={<Comp2 p={'aa'}>}

В Comp3 ожидается элемент с пропсами Props1, но невозбранно заезжает Comp2, и TS помалкивает, потому что у переданного значения тип JSX.Element, который по сути ReactElement< any>