Principiantereact
Paso de Datos: Props
Comprende el modelo de flujo de datos unidireccional de React utilizando "props".
¿Qué son las Props?
Las props (propiedades) son argumentos que un componente "padre" le pasa a un componente "hijo". Piensa en ellas como los atributos HTML (como
src o href), pero puedes pasar cualquier dato de JavaScript (textos, arrays, objetos o incluso funciones).Flujo Unidireccional
En React, el agua solo corre hacia abajo. Una *prop* se pasa de arriba (Padre) hacia abajo (Hijo). Además, las props son de solo lectura: un componente hijo NUNCA debe intentar modificar las props que recibió.
jsx
1function TarjetaUsuario(props) {
2 return (
3 <div className="tarjeta">
4 <h3>{props.nombre}</h3>
5 <p>Rol: {props.rol}</p>
6 </div>
7 );
8}
9
10// El componente Padre las inyecta:
11function App() {
12 return <TarjetaUsuario nombre="Ana" rol="Admin" />;
13}La prop especial "children"
React inyecta automáticamente la prop
children a cualquier componente que contenga elementos dentro de su etiqueta de apertura y cierre.jsx
1function BotonEnvoltorio({ children }) {
2 return <button className="btn-magico">{children}</button>;
3}
4
5// Uso:
6<BotonEnvoltorio>
7 <span>Haz clic aquí</span>
8</BotonEnvoltorio>