是否可以使用TypeScript键入React函数组件而不使用箭头函数？

Question

目前我有这样的React组件类型：

import React, { FunctionComponent } from "react";

const HelloWorld : FunctionComponent = () => {
  return (
    <div>
      Hello
    </div>
  );
}

export default HelloWorld;

我不想使用箭头函数并像这样编写我的组件：

import React, { FunctionComponent } from "react";

function HelloWorld() {
  return (
    <div>
      Hello
    </div>
  );
}

export default HelloWorld;

可以输入正常函数FunctionComponent吗？

Answer 1

FunctionComponent类型基本上归结为一个接收道具并返回ReactElement的函数：

(props: PropsWithChildren<P>, context?: any): ReactElement | null;

因此，一种选择是相应地键入您的非箭头函数：

function HelloWorld(): ReactElement {
  return (
    <div>
      Hello
    </div>
  );
}

另一个选项（与TS React生态系统的其余部分更好地集成）是将您的函数存储在命名变量中：

interface SomeProps {
  someValue: number
}

const HelloWorld: FunctionComponent<SomeProps> = function HelloWorld({ someValue }) {
  return <div>Hi {someValue}</div>
}

总的来说，虽然我建议您只使用箭头功能，因为它们提供了好处，特别是在JS示波器和this参考时。