Componentes con contenido: children
La prop children representa el contenido escrito entre las etiquetas de un componente. Permite crear contenedores reutilizables, como tarjetas, ventanas o paneles, sin fijar todo su contenido.
1import type { ReactNode } from 'react'; 2 3interface Props { 4 children: ReactNode; 5} 6 7function MiComponente({ children }: Props) { 8 return <div style={{ border: '1px solid gray', padding: 12 }}>{children}</div>; 9} 10 11export default function Ejem_08() { 12 return ( 13 <MiComponente> 14 <strong>¡Hola!</strong> 15 <p>Este contenido lo ha elegido el padre.</p> 16 </MiComponente> 17 ); 18}
El padre elige el contenido y MiComponente elige cómo envolverlo. El componente debe incluir {children} en su retorno para mostrarlo; React no lo coloca automáticamente.
¿Por qué ReactNode? #
ReactNode describe contenido que React puede renderizar, como elementos, texto, números, listas de nodos o null. Es más amplio que string, por lo que puedes pasar una etiqueta <strong> sin perder el tipado.
En este contrato children es obligatorio. Si quieres permitir que se omita, puedes escribir children?: ReactNode.
Composición #
Puedes combinar children con otras props, por ejemplo titulo, y renderizar un encabezado seguido del contenido. Esta técnica se llama composición: construyes una pieza mayor juntando otras más pequeñas.
No hace falta conocer las etiquetas que recibirá el contenedor para utilizarlas. Tampoco debes modificar el contenido recibido directamente: el componente decide dónde mostrarlo.
Prueba tú #
Crea Tarjeta con las props titulo y children. Utilízala una vez con un párrafo y otra con una lista. La estructura de la tarjeta debe ser la misma.
Cuestionario del tema #
Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.