当函数类型为 FunctionalComponent 时，Typescript 返回错误，但箭头函数不返回

【问题标题】：Typescript returns error when a function type is FunctionalComponent, but not for arrow function当函数类型为 FunctionalComponent 时，Typescript 返回错误，但箭头函数不返回
【发布时间】：2021-07-16 16:49:41
【问题描述】：

下面是例子：

function RoundButton(): React.FC {
  return <div>"hello world"</div>;
}

给出一个错误：

类型“元素”不可分配给类型“FC”。类型 'Element' 不提供与签名 '(props: { children?: ReactNode;}, context?: any): ReactElement |空'.ts(2322)

但是下面的代码：

const RoundButton: React.FC = () => {
      return <div>"hello world"</div>;
    }

没有。我在这里错过了什么？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

在第一种情况下，您是在说函数返回，但在第二种情况下，您在说函数是。

第二个是正确的。 React.FC 是一个函数类型。你的第二个块说你的函数是React.FC，这意味着它接受props: PropsWithChildren<P>, context?: any并返回ReactElement<any, any> | null。

如果你想使用function 语法而不是箭头语法，你可以这样写：

const RoundButton: React.FC = function() {
    return <div>"hello world"</div>;
};

...或者如果你真的想要一个函数声明而不是一个函数表达式，因为我们知道React.FC（像所有组件函数一样）只有一个参数，我们可以使用@ 987654321@ 和 ReturnType 实用程序类型：

function RoundButton2(props: Parameters<React.FC>[0]): ReturnType<React.FC> {
    return <div>"hello world"</div>;
}

【讨论】：