Какой тип 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

13
1

  • `React.ComponentType`?< ...
1
Общее количество ответов: 1

Ответ #1

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

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 лучше.

22
2

  • Также еще один момент: ComponentType, похоже, не принимает `keyof ReactHTML`, что не является проблемой в моем случа ...