反应/打字稿 - React.createElement

Question

我有一个包含对 FunctionalComponent 的引用的对象，但是当我将该引用传递到 createElement 语句时，它会引发 TS 错误。

问题：为什么会出现这种抱怨？我的界面除了 Component 和 FunctionalComponent。

示例：

const someFunctionalComponent: React.FC = () => {
  return <div></div>
}
const anotherFunctionalComponent: React.FC = () => {
  return <div></div>

}

const somePages = [someFunctionalComponent, anotherFunctionalComponent];

interface TabPage {
  active: number;
  content: React.Component | React.FC;
}


somePages.forEach(page => React.createElement(page))

Answer 1

您在组件实例和组件类之间感到困惑。 class 之类的 React.Component 名称表示该类的实例的类型。 React.createElement 正在寻找构造函数而不是实例。

类构造函数的类型是React.ComponentClass。您可以使用 content: React.ComponentClass | React.FC。但实际上这个联合有一个内置的帮助器，它是 React.ComponentType<Props>。

interface TabPage {
  active: number;
  content: React.ComponentType;
}

Typescript Playground Link