TypeScript 中的 React 组件类型

Question

在 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) 返回它

原文由 Gena 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 3Dos 发布，翻译遵循 CC BY-SA 4.0 许可协议