Какой тип TypeScript принимает любой компонент React в качестве опоры?

Question

Какой тип TypeScript принимает любой компонент React в качестве опоры?

У меня есть компонент, который может принимать 9X_react-jsx другой компонент в качестве опоры.

Очень 9X_reactjs упрощенный пример:

interface Props { Comp: React.ComponentClass | React.SFC } const MyComp: React.FC = ({ Comp }) => { return React.createElement(Comp) }

Какой был бы самый простой 9X_react тип для Comp, который принимает функциональные 9X_react-dom компоненты, компоненты на основе классов 9X_typescript и т. д.?

Определение типа createElement делает 9X_atscript его довольно сложным https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v16/index.d.ts#L286

h

hackedd

reactjs

typescript

Комментарии:

`React.ComponentType`?< ...

Общее количество ответов: 1

Ответ #1

N Nikromwars · Accepted Answer · 2023-10-06

React.ComponentType

React.ComponentType

- это тип либо для компонента класса (React.ComponentClass

), либо 9X_react-dom для функционального компонента (React.FunctionComponent

aka React.FC

), который 9X_react-dom принимает реквизиты P.

(FYI, React.ReactNode и React.ReactElement - это типы 9X_react для JSX, возвращаемого компонентом, а не 9X_react для вызываемого компонента)

Набор реквизитов компа

Вы не хотите 9X_react-component использовать в своем типе Props. Вы хотите объявить, что 9X_atscript компоненту требуются только реквизиты, которые 9X_react.js вы предоставляете при вызове React.createElement(Comp) (вы также 9X_react-component вызываете использование JSX и return ). В этом 9X_react-component случае вы не предоставляете реквизиты, поэтому 9X_vanilla-typescript это будет React.ComponentType<{}> или просто React.ComponentType, поскольку {} используется 9X_vanilla-typescript по умолчанию для P.

interface Props { Comp: React.ComponentType; } const MyComp: React.FC = ({ Comp }) => { return }

с реквизитом:

interface Props { Comp: React.ComponentType<{someKey: string}>; } const MyComp: React.FC = ({ Comp }) => { return }

Вы получите 9X_react-jsx сообщение об ошибке, если вызовете Comp, не 9X_react-jsx указав someKey, и это хорошо! Вы не получите эту 9X_reactjs ошибку при вызове React.createElement(Comp), потому что по какой-то 9X_react-jsx причине аргумент props является необязательным. Так 9X_atscript что, на мой взгляд, подход JSX лучше.