TypeScript 中的 React 组件类型答案

【问题标题】：React component type in TypeScriptTypeScript 中的 React 组件类型
【发布时间】：2019-11-18 17:20:27
【问题描述】：

在 TypeScript 中描述反应组件类型的正确方法是什么？假设我们有一个返回反应组件的函数。功能：

const getTabContent: () => ReactElement = () => {
  switch (tab) {
    case 1:
      return <Images images={images} onSelect={onSelect}/>;
    default:
      return <Search onSelect={onSelect}/>;
  }
};

这里我将返回类型描述为 ReactElement，但我想知道它是否正确，或者我应该将其描述为 ReactComponentElement，甚至完全不同？另外这两种类型都是泛型的，如果其中一种是正确的，如何充分描述它们？

UPD ReactElement 似乎适合这里，因为例如 FC (FunctionComponent) 会返回它

【问题讨论】：

React.Component?
谢谢@MoshFeu，但它不适合。编译器感到困惑

标签： reactjs typescript

【解决方案1】：

功能组件的正确类型是React.FunctionComponent 或React.FC，这是它的快捷别名

import React, { FC } from 'react';

const getTabContent: FC = () => {
  switch (tab) {
    case 1:
      return <Images images={images} onSelect={onSelect}/>;
    default:
      return <Search onSelect={onSelect}/>;
  }
};

FC 类型只需将children 属性添加到功能组件的props 参数，以便您可以访问它：

const SomeComponent: FC = ({ children }) => (
  <div className="hello">{children}</div>
);

FC 是一种泛型类型，因此您可以向组件“添加”道具：

interface SomeComponentProps {
  foo: string;
}

const SomeComponent: FC<SomeComponentProps> = ({ children, foo }) => (
  <div className={`Hello ${foo}`}>{children}</div>
);

【讨论】：

你确定<Images />是函数组件吗？
不是，getTabContent 是。 <Images />是该功能组件的返回值
谢谢@3Dos。但是如果我将 Image 和 Search 重写为类组件，我应该在此处以及提到这些组件的任何地方更改类型？
我想你不明白。这里的函数组件是getTabContent，只要返回JSX值或者null就可以了。事实上，这里的 FC 类型不是必需的，因为类型推断就足够了。 FC 类型将允许您使用 children 属性，但一些开发人员喜欢始终使用 FC 键入，因此每个组件都已键入。
不知道是不是更新的版本改了，全名是React.FunctionComponent而不是React.FunctionalComponent。

【解决方案2】：

如果您想将 FunctionComponent 与类 Component 一起使用，然后使用React.ComponentType

【讨论】：

【解决方案3】：

TypeScript 带有强大的类型推断功能。只是在大多数地方使用它。只有顶级组件需要细粒度的接口。

For example, here resulting type will be computed as JSX.Element

const getTabContent = ({ tab, onSelect }: { tab: number, onSelect: (ev: React.SyntheticEvent) => void }) => {
  switch (tab) {
    case 1:
      return <Image src="123"/>;
    default:
      return <Search onSelect={onSelect}/>;
  }
};

【讨论】：