Composición: children y división en componentes

Construye componentes contenedor reutilizables con la prop children y divide tus pantallas en responsabilidades claras.

6 min · 3 preguntas

Algunos componentes no conocen su contenido de antemano: una tarjeta, una ventana modal, un layout. React resuelve esto con la prop especial children: todo lo que colocas entre las etiquetas de apertura y cierre de un componente se le entrega, listo para insertarse donde quiera. El contenedor se encarga del marco, quien lo invoca aporta el contenido.

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function App() {
  return (
    <Card>
      <h2>Invoice #1024</h2>
      <p>Amount: €49.90</p>
    </Card>
  );
}

Cuando una sola ranura no basta, pasa JSX mediante props con nombre: un título, un pie, una barra de acciones. Una prop puede recibir un elemento de React igual que cualquier otro valor. Obtienes varias “ranuras”, cada una claramente nombrada.

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <header>{title}</header>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

La composición también guía la división. Un componente debería tener una responsabilidad identificable: mostrar una fila de usuario, disponer una lista. En cuanto un componente acumula varios roles, extrae subcomponentes: cada uno se vuelve más corto, más fácil de probar y reutilizable en otro lugar.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <UserRow key={user.id} user={user} />
      ))}
    </ul>
  );
}

function UserRow({ user }) {
  return (
    <li>
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué recibe la prop children de un componente?
   • La lista de sus componentes hijos declarados en el mismo archivo
   • Todo lo que se coloca entre sus etiquetas de apertura y cierre
   • Las props transmitidas por el componente padre
2. ¿Puedes pasar JSX en una prop distinta de children?
   • Sí, un elemento de React es un valor como cualquier otro
   • No, solo la prop children acepta JSX
   • Sí, pero solo como una cadena que contiene HTML
3. ¿Qué señal indica de forma más fiable que un componente debería dividirse?
   • Supera las veinte líneas de código
   • Usa más de un useState
   • Combina varias responsabilidades distintas en su renderizado