时间戳

首页 > 解决方案 > TypeScript 中的 React 组件类型

reactjs - TypeScript 中的 React 组件类型

问题描述

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

标签： reactjstypescript

解决方案

功能组件的正确类型是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>
);

推荐阅读