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

Question

下面是示例:

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

给出一个错误:

Type 'Element' is not assignable to type 'FC<{}>'. Type'Element'provides no match for the signature '(props: { children?:ReactNode;}, context?: any): ReactElement<any, any> | null'.ts(2322)

但下面的代码:

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

才不是。我在这里想念什么？

Answer 1

在第一种情况下，您是在说函数返回什么，但在第二种情况下，您在说函数是什么。
第二个是正确的。 React.FC是一个函数类型。你的第二个 block 说你的函数是 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>;
}