reactjs - 是否可以在不使用箭头函数的情况下使用 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 type 基本上可以归结为一个接收 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>
}

总的来说，我建议您只使用箭头函数，因为它们提供了好处，特别是当涉及 JS 范围和 this 时引用。