Búsqueda de sitios web

reactjs - ¿Es posible escribir un componente funcional de React con TypeScript sin usar funciones flecha?

Actualmente tengo este componente de React tipado de la siguiente manera:

import React, { FunctionComponent } from "react";

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

export default HelloWorld;

No me gustaría usar funciones flecha y escribir mi componente así:

import React, { FunctionComponent } from "react";

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

export default HelloWorld;

¿Es posible escribir funciones normales como FunctionComponent?

Respuesta #1

El tipo FunctionComponent básicamente se reduce a una función que recibe props y devuelve un ReactElement:

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

Así que una opción sería escribir tu función que no sea flecha en consecuencia:

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

La otra opción (que se integra mejor con el resto del ecosistema TS React) es almacenar tu función en una variable con nombre:

interface SomeProps {
  someValue: number
}

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

En general, sin embargo, recomendaría que simplemente uses funciones flecha, ya que ofrecen beneficios, especialmente cuando se trata de los ámbitos de JS y la referencia this.

Artículos relacionados