在 TypeScript 中反应组件类型

Question

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

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

在这里，我将返回类型描述为ReactElement，但我想知道它是否正确，或者我应该将其描述为ReactComponentElement还是以某种方式完全不同？此外，这两种类型都是泛型，如果其中一种是正确的，如何完全描述它们？

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

Answer 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>
);

Answer 2

如果要将 FunctionComponent 与类 Component 一起使用，则使用 React.ComponentType

Answer 3

考虑 React 中的这个内置定义：

type PropsWithChildren<P> = P & {
    children?: React.ReactNode;
}

我在用React.ReactNode。它被定义为

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;