Question

在TypeScript中描述React组件类型的正确方法是什么？假设我们有一个函数返回一个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

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

Answer 2

功能组件的正确类型是React.FunctionalComponent或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 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}/>;
  }
};

在TypeScript中反应组件类型

3 个答案: