9.2-Componente React con Props de Tipo Cadena
Tutorial Sencillo: Componentes React con Props de Tipo Cadena
Ejemplo 1: Saludo Simple
Componente Padre: App.js
function App() {
return (
<div>
<h1>Tutorial Props String</h1>
<Saludo nombre="Ana" />
<Saludo nombre="Carlos" />
</div>
);
}
Componente Hijo: Saludo.js
function Saludo(props) {
return <h3>¡Hola {props.nombre}!</h3>;
}
Componente Padre: App.js
function App() {
return (
<div>
<TarjetaUsuario
nombre="María"
ocupacion="Programadora"
ciudad="Madrid"
/>
</div>
);
}
Componente Hijo: TarjetaUsuario.js
jsx
function TarjetaUsuario(props) {
return (
<div style={{border: '1px solid black', padding: '10px', margin: '10px'}}>
<h4>{props.nombre}</h4>
<p>Ocupación: {props.ocupacion}</p>
<p>Ciudad: {props.ciudad}</p>
</div>
);
}
Ejemplo 3: Botón con Texto Dinámico
Componente Padre: App.js
jsx
function App() {
return (
<div>
<Boton texto="Guardar" tipo="primario" />
<Boton texto="Cancelar" tipo="secundario" />
<Boton texto="Eliminar" tipo="peligro" />
</div>
);
}
Componente Hijo: Boton.js
jsx
function Boton(props) {
const estilos = {
primario: {backgroundColor: 'blue', color: 'white'},
secundario: {backgroundColor: 'gray', color: 'white'},
peligro: {backgroundColor: 'red', color: 'white'}
};
const estilo = estilos[props.tipo] || estilos.primario;
return (
<button style={{...estilo, padding: '10px', margin: '5px'}}>
{props.texto}
</button>
);
}
Ejemplo 4: Notificación Simple
Componente Padre: App.js
jsx
function App() {
return (
<div>
<Notificacion mensaje="Operación exitosa" tipo="exito" />
<Notificacion mensaje="Error de conexión" tipo="error" />
<Notificacion mensaje="Cargando datos..." tipo="info" />
</div>
);
}
Componente Hijo: Notificacion.js
jsx
function Notificacion(props) {
const iconos = {
exito: '✅',
error: '❌',
info: 'ℹ️'
};
const icono = iconos[props.tipo] || iconos.info;
return (
<div style={{
border: '1px solid gray',
padding: '10px',
margin: '10px',
backgroundColor: '#f8f8f8'
}}>
{icono} {props.mensaje}
</div>
);
}
Comentarios
Publicar un comentario