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

Posted 2023-03-10

【中文标题】当函数类型为 FunctionalComponent 时，Typescript 返回错误，但箭头函数不返回

【英文标题】：Typescript returns error when a function type is FunctionalComponent, but not for arrow function

【发布时间】：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>;
    

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

【参考方案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>;