Props de React para principiantes: Convierte componentes estáticos en plantillas
Aprenda cómo las props de React transmiten datos desde los componentes padre a los hijos, cómo funciona el objeto props, qué tipos de valores se pueden pasar y por qué el flujo de datos unidireccional es útil.
Fuentes: Part 5A — React Props Explained: Pass Data Between Components Like a Pro
Dividir una interfaz de React en componentes es solo la mitad del proceso de reutilización. Un componente que siempre muestra el mismo texto es una unidad de copiar y pegar, no un bloque constructivo. Las props son el mecanismo que permite a un componente mostrar contenido diferente cada vez que se utiliza. Esta guía explica qué son las props, cómo se transfiere la data de padre a hijo, cómo leer las props dentro de un componente y qué tipos de valores se pueden pasar, para que pueda convertir componentes con código fijo en plantillas reutilizables.
Cuando un componente solo puede mostrar una cosa
Una vez que sepa cómo construir componentes, un árbol de aplicaciones típico se verá más o menos así, con una raíz App que muestra varias secciones:
App
│
├── Navbar
├── Hero
├── Features
├── Footer
Ahora imagine una tarjeta de producto para una tienda en línea. Muestra un nombre, un precio, una calificación y un botón de compra:
-------------------------
📱 iPhone 16
₹79,999
⭐⭐⭐⭐⭐
Buy Now
-------------------------
Luego llega el requisito: mostrar 500 productos. La tarjeta tal como está diseñada solo puede mostrar ese un único teléfono a ese precio específico, por lo que los ordenadores portátiles, los auriculares y los relojes requerirían cada uno un componente casi idéntico, lo cual anula el propósito de los componentes. Es necesario mantener la estructura fija mientras se proporcionan datos diferentes en cada ocasión. Eso es exactamente lo que ofrecen las props.
¿Qué son las props?
“Props” es la abreviatura de properties. Son los valores que un componente padre transmite a un componente hijo al renderizarlo. El componente define la estructura y el estilo; las props aportan los detalles que hacen única cada instancia.
Una analogía con la cocina ayuda a entenderlo. Una pizzería no inventa una nueva receta para cada pedido. Tiene una sola receta y recibe instrucciones diferentes según el pedido: queso adicional, champiñones, aceitunas, maíz. La receta es el componente, y los ingredientes adicionales son las props.
En otras palabras, un componente actúa como plantilla y los props llenan los espacios en blanco. En lugar de crear una tarjeta separada que siempre muestre lo mismo, como esta:
Product Card
iPhone
se crea una tarjeta de producto genérica y se le pasan datos diferentes dondequiera que se utilice.
Padres, hijos y flujo de datos unidireccional
Los props solo tienen sentido en términos de la relación entre componentes. Cada aplicación React es un árbol en el que algunos componentes renderizan a otros:
App
│
├── Navbar
├── Hero
├── ProductCard
└── Footer
Aquí App es el padre, y Navbar, Hero, ProductCard y Footer son sus hijos. El padre decide qué hijos renderizar y también puede proporcionar información a cada hijo. Esa información son sus props.
React impone un flujo de datos unidireccional: los props se transmiten hacia abajo, desde el padre al hijo.
App
│
│ title
│ price
│ rating
▼
ProductCard
El hijo recibe title, price y rating, pero no puede enviar valores nuevos hacia arriba a través de sus props. Desde el punto de vista del hijo, los props también son de solo lectura. Un componente nunca debe modificar los props que recibe; si algo necesita cambiar con el tiempo, eso debería estar en el estado, generalmente gestionado por el padre. Cuando un hijo necesita informar algo hacia arriba, como un clic, el padre le pasa una función como prop y el hijo la llama. Dado que los datos solo fluyen en una dirección, siempre se puede rastrear de dónde proviene un valor subiendo por el árbol, lo que facilita mucho la detección de errores.
Tu primer componente con props
Comienza con un componente que salude a alguien por su nombre. Este acepta un parámetro llamado props y lee props.name dentro de su JSX:
function Welcome(props) {
return (
<h1>Hello, {props.name}</h1>
);
}
export default Welcome;
El padre lo renderiza y proporciona el nombre como un atributo:
import Welcome from "./Welcome";
function App() {
return (
<>
<Welcome name="Ayush" />
</>
);
}
export default App;
El resultado renderizado es:
Hello, Ayush
Qué hace cada parte de la sintaxis
Pasar un prop es como escribir un atributo HTML en la etiqueta del componente:
<Welcome name="Ayush" />
Es útil pensar en esto como si se estuviera llamando a una función con argumentos. En el lado receptor, el componente es una función cuyo primer parámetro son los props:
function Welcome(props)
React reúne todos los atributos que escribiste en la etiqueta en un único objeto simple y lo pasa como ese parámetro. Leer un valor es un acceso normal a propiedades:
props.name
Debido a que el padre pasó este atributo:
name="Ayush"
el componente renderiza:
Hello, Ayush
El nombre props es solo una convención. Muchos conjuntos de código lo desestructuran en la lista de parámetros, como en function Welcome({ name }).
Passing several props at once
Los componentes reales suelen necesitar más de un valor. Puedes agregar tantos atributos como desees. Ten en cuenta que las cadenas de texto se escriben entre comillas, mientras que los números y otros valores de JavaScript van dentro de llaves. El fragmento a continuación carece de un espacio entre el nombre del componente y el primer atributo; debería leerse <Welcome name=...:
<Welcomename="Ayush"
company="OpenAI"
experience={6}
/>
El componente lee cada prop por su nombre:
function Welcome(props) {
return (
<>
<h2>{props.name}</h2>
<p>{props.company}</p>
<p>{props.experience} Years</p>
</>
);
}
Y renderiza:
Ayush
OpenAI
6 Years
Cambiando las props, el mismo componente muestra información completamente diferente.
A reusable product card
Volvamos a la tienda. Ahora la tarjeta obtiene su título, precio y calificación de los parámetros pasados en lugar de tenerlos codificados directamente:
function ProductCard(props) {
return (
<div>
<h2>{props.title}</h2>
<p>₹ {props.price}</p>
<p>{props.rating}</p>
</div>
);
}
export default ProductCard;
El componente padre puede renderizar tantas tarjetas como necesite, cada una con sus propios datos. El precio se transmite como un número entre llaves, mientras que el título y la calificación son cadenas de texto:
<ProductCard
title="iPhone 16"
price={79999}
rating="⭐⭐⭐⭐⭐"
/>
<ProductCard
title="Samsung S25"
price={68999}
rating="⭐⭐⭐⭐"
/>
<ProductCard
title="MacBook Air"
price={99999}
rating="⭐⭐⭐⭐⭐"
/>
Un único componente, tres productos diferentes, sin marcado duplicado. Tampoco escribirías 500 etiquetas a mano para 500 productos: los datos provendrían de un array, y renderizarías las tarjetas con products.map(...), pasando los campos de cada elemento como parámetros y asignando a cada tarjeta una key única.
Por qué los parámetros permiten la reutilización
Sin parámetros, una tienda necesitaría un componente separado para cada producto:
ProductCard1
ProductCard2
ProductCard3
ProductCard4
ProductCard5
Eso significa que hay muchos archivos con código casi idéntico, donde cualquier cambio de diseño debe repetirse en todas partes. Con los props, el flujo consiste en un componente al que se le proporcionan datos variables:
ProductCard
↓
Different Product Data
↓
Multiple Cards
Un archivo define la tarjeta; las instancias difieren únicamente en los datos. Este es el patrón básico detrás de las aplicaciones grandes con React y los sistemas de diseño.
Imagínese un formulario estándar: todos completan los mismos campos, como nombre, edad y dirección, con detalles diferentes. El formulario en blanco es el componente; los datos ingresados son los props.
Qué tipos de valores se pueden pasar
Los props no están limitados al texto. Se puede pasar cualquier valor de JavaScript. Las cadenas pueden usar comillas:
name="Ayush"
Los números se escriben entre llaves, de modo que React recibe un número real en lugar de la cadena “26”:
age={26}
Los booleanos también utilizan llaves:
isAdmin={true}
Puede pasar el valor de una variable:
name={username}
O el resultado de cualquier expresión, que se evalúa antes de que la componente hija lo reciba:
price={500 + 200}
Los arrays, objetos y funciones también pueden pasarse de la misma manera, dentro de llaves. Las funciones como propiedades son el medio mediante el cual las componentes hijas notifican a las padres sobre eventos, y una propiedad especial llamada children permite a un componente envolver cualquier marcado que se coloque entre sus etiquetas de apertura y cierre.
Valores codificados versus propiedades
Compare un encabezado codificado:
<h2>iPhone 16</h2>
con uno controlado por una propiedad:
<h2>{props.title}</h2>
El primero solo puede mostrar un producto; el segundo puede mostrar cualquier cantidad de ellos. Cada vez que te encuentres escribiendo contenido específico en un componente destinado a ser reutilizado, pregúntate si ese contenido debería ser una prop en su lugar. Simplemente evita el extremo opuesto: convertir cada pequeño detalle en una prop hace que los componentes sean más difíciles de usar, así que solo expone aquello que realmente varía entre usos.
Para repasar cómo están estructurados los componentes en sí, consulta React components 101.
Puntos clave
- Las props, abreviatura de properties, son valores que un padre pasa a un hijo al renderizarlo.
- Los datos fluyen en una sola dirección, desde el padre al hijo, y los hijos tratan las props como de solo lectura.
props que se pasa como el primer argumento de la función.children.Lecturas relacionadas
- React Components 101: Construyendo Elementos UI Reutilizables y Mantenibles — Aprenda por qué dividir la interfaz de usuario en pequeños componentes React mejora la reutilización, la legibilidad y la colaboración en equipo, y luego cree su primer componente funcional.
- Componentes de Orden Mayor desde Envoltorios de Clase hasta Funciones y Gancho — Aprenda cómo funcionan los componentes de orden mayor en React, cómo se presenta el mismo HOC como clase y como función, y por qué los gancho personalizados reemplazaron la mayoría de los casos de uso de HOC.
- De JSX a Objetos Simples: Cómo Funcionan React Elements, Componentes y Propiedades — Descubra en qué se compila JSX, por qué los componentes son simplemente funciones, y cómo las propiedades, hijos, valores predeterminados, la propagación de valores y los slots se derivan de ese modelo conceptual.
- Solucionar las transiciones de altura en Vue para componentes web renderizados de forma asíncrona — Aprenda por qué la transición de expansión en Vue se anima de 0px a 0px alrededor de los componentes web actualizados de forma perezosa, y cómo ResizeObserver retrasa la animación hasta que existe una altura real.