使用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？

- Breno Calazans

Answer 1

FunctionComponent类型基本上是一个函数，该函数接收props并返回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>
}

总的来说，我建议您使用箭头函数，因为它们提供许多好处，特别是在处理JavaScript作用域和this引用时。

- Jesse Carter

---

第一个示例中是否可以添加props接口？为什么后者与生态系统集成得更好？ - Breno Calazans

这就是我所说的更好地集成，您将能够充分利用组件属性和状态的类型和智能感知。我不知道如何使第一个示例起作用，因此实际上它的使用范围有限。为什么您要避免使用箭头函数？ - Jesse Carter