Pasar referencias a funciones mediante props

Una prop también puede contener una función. Así el padre decide qué hacer y el hijo decide cuándo utilizar esa función. Una referencia a función es la función misma, sin ejecutarla en el lugar donde la pasas.

1interface Props {
2  mensaje: string;
3  color: string;
4  modoDeFormatear: (texto: string) => string;
5}
6
7function MiComponente({ mensaje, color, modoDeFormatear }: Props) {
8  return (
9    <div style={{ backgroundColor: color }}>
10      Me has dicho: {modoDeFormatear(mensaje)}
11    </div>
12  );
13}
14
15export default function Ejem_06() {
16  const formatearElTextoEnMayusculas = (texto: string) => texto.toUpperCase();
17
18  return (
19    <MiComponente
20      mensaje="Cebem"
21      color="red"
22      modoDeFormatear={formatearElTextoEnMayusculas}
23    />
24  );
25}

El tipo (texto: string) => string describe una función que recibe una cadena y devuelve otra cadena. El padre pasa la referencia con modoDeFormatear={formatearElTextoEnMayusculas}. El hijo la ejecuta con modoDeFormatear(mensaje) y muestra CEBEM.

Si escribieras modoDeFormatear={formatearElTextoEnMayusculas('Cebem')}, estarías pasando el resultado, una cadena. Esa cadena no cumple el tipo de la prop.

La misma idea con eventos #

Un botón recibe una función en onClick. Escribe onClick={handleClick} para pasarla. Si necesitas argumentos, escribe onClick={() => handleClick('hola')}. La flecha retrasa la llamada hasta el clic.

La función formateadora del ejemplo se ejecuta al renderizar para calcular el texto. Debe ser pura: devuelve un resultado sin cambiar estado ni realizar peticiones. Un manejador de eventos, en cambio, se ejecuta cuando ocurre la interacción.

Prueba tú #

Crea otra función que añada signos de exclamación al mensaje. Pasa esa referencia a una segunda aparición de MiComponente.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.