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

Question

下面是示例：

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

给出错误：

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

但下面的代码：

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

才不是。我在这里缺少什么？

Answer 1

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

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

如果您想使用function语法而不是箭头语法，可以将其写为：

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

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

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