Pasar props a un componente

Los componentes de React utilizanpropspara comunicarse entre sí. Cada componente padre puede pasar cierta información a sus componentes hijos dándoles props. Los props pueden recordarte a los atributos HTML, pero puedes pasar cualquier valor de JavaScript a través de ellos, incluyendo objetos, arrays y funciones.

Props familiares

Los props son la información que pasas a una etiqueta JSX. Por ejemplo,className,src,alt,width y heightson algunos de los props que puedes pasar a una<img>:

Los props que puedes pasar a una etiqueta<img>están predefinidos (ReactDOM se ajusta ael estándar HTML). Pero puedes pasar cualquier prop atus propioscomponentes, como<Avatar>, para personalizarlos. ¡Así es cómo!

Pasar props a un componente

En este código, el componenteProfileno está pasando ningún prop a su componente hijo,Avatar:

Puedes darle aAvataralgunos props en dos pasos.

Paso 1: Pasar props al componente hijo

Primero, pasa algunos props aAvatar. Por ejemplo, pasemos dos props:person(un objeto) ysize(un número):

Ahora puedes leer estos props dentro del componenteAvatar.

Paso 2: Leer props dentro del componente hijo

Puedes leer estos props enumerando sus nombresperson, sizeseparados por comas dentro de({ y })directamente después defunction Avatar. Esto te permite usarlos dentro del código deAvatar, como lo harías con una variable.

Añade algo de lógica aAvatarque utilice los propsperson y sizepara renderizar, y listo.

Ahora puedes configurarAvatarpara que se renderice de muchas maneras diferentes con diferentes props. ¡Intenta ajustar los valores!

Las props te permiten pensar en los componentes padre e hijo de forma independiente. Por ejemplo, puedes cambiar las propsperson o sizedentro deProfilesin tener que pensar en cómoAvatarlas usa. Del mismo modo, puedes cambiar cómoAvatarusa estas props, sin mirar elProfile.

Puedes pensar en las props como "perillas" que puedes ajustar. Cumplen el mismo papel que los argumentos para las funciones; de hecho, las propssonel único argumento de tu componente. Las funciones de componentes de React aceptan un solo argumento, un objetoprops:

Normalmente no necesitas todo el objetopropsen sí, así que lo desestructuras en props individuales.

Especificar un valor predeterminado para una prop

Si quieres darle a una prop un valor predeterminado para usar cuando no se especifica un valor, puedes hacerlo con la desestructuración colocando=y el valor predeterminado justo después del parámetro:

Ahora, si<Avatar person={...} />se renderiza sin la propsize, elsizese establecerá en100.

El valor predeterminado solo se usa si falta la propsizeo si pasassize={undefined}. Pero si pasassize={null} o size={0}, el valor predeterminadonose usará.

Reenviar props con la sintaxis de propagación de JSX

A veces, pasar props se vuelve muy repetitivo:

No hay nada malo con el código repetitivo; puede ser más legible. Pero a veces puedes valorar la concisión. Algunos componentes reenvían todas sus props a sus hijos, como lo hace esteProfile con Avatar. Debido a que no usan ninguna de sus props directamente, puede tener sentido usar una sintaxis de "propagación" más concisa:

Esto reenvía todas las props deProfile al Avatarsin listar cada uno de sus nombres.

Usa la sintaxis de propagación con moderación.Si la usas en cada otro componente, algo anda mal. A menudo, indica que deberías dividir tus componentes y pasar hijos como JSX. ¡Más sobre eso a continuación!

Pasar JSX como hijos

Es común anidar etiquetas integradas del navegador:

A veces querrás anidar tus propios componentes de la misma manera:

Cuando anidas contenido dentro de una etiqueta JSX, el componente padre recibirá ese contenido en una prop llamadachildren. Por ejemplo, el componenteCarda continuación recibirá una propchildrenestablecida en<Avatar />y la renderizará en un div envolvente:

Intenta reemplazar el<Avatar>dentro de<Card>con algún texto para ver cómo el componenteCardpuede envolver cualquier contenido anidado. No necesita "saber" qué se está renderizando dentro de él. Verás este patrón flexible en muchos lugares.

Puedes pensar en un componente con una propchildrencomo si tuviera un "hueco" que puede ser "rellenado" por sus componentes padres con JSX arbitrario. A menudo usarás la propchildrenpara envoltorios visuales: paneles, cuadrículas, etc.

Ilustrado porRachel Lee Nabors

Cómo cambian las props con el tiempo

El componenteClocka continuación recibe dos props de su componente padre:color y time. (Se omite el código del componente padre porque usaestado, en lo que no profundizaremos por ahora).

Intenta cambiar el color en el cuadro de selección a continuación:

Este ejemplo ilustra queun componente puede recibir props diferentes con el tiempo.¡Las props no siempre son estáticas! Aquí, la proptimecambia cada segundo, y la propcolorcambia cuando seleccionas otro color. Las props reflejan los datos de un componente en cualquier momento, no solo al principio.

Sin embargo, las props soninmutables—un término de informática que significa "inalterable". Cuando un componente necesita cambiar sus props (por ejemplo, en respuesta a una interacción del usuario o nuevos datos), tendrá que "pedir" a su componente padre que le paseprops diferentes—¡un nuevo objeto! Sus props antiguas serán entonces descartadas, y eventualmente el motor de JavaScript reclamará la memoria que ocupaban.

No intentes "cambiar las props".Cuando necesites responder a la entrada del usuario (como cambiar el color seleccionado), tendrás que "establecer un estado", lo que puedes aprender enEstado: La memoria de un componente.

Recapitulación

• Para pasar props, agrégalos al JSX, tal como lo harías con atributos HTML.
• Para leer props, usa la sintaxis de desestructuraciónfunction Avatar({ person, size }).
• Puedes especificar un valor predeterminado comosize = 100, que se usa para props faltantes yundefined.
• Puedes reenviar todos los props con la sintaxis de propagación JSX<Avatar {...props} />, ¡pero no abuses de ella!
• El JSX anidado como<Card><Avatar /></Card>aparecerá como la propchildrendel componenteCard.
• Los props son instantáneas de solo lectura en el tiempo: cada renderizado recibe una nueva versión de props.
• No puedes cambiar los props. Cuando necesites interactividad, tendrás que establecer estado.