Lección 2 de 12 · Lectura y práctica
Compound Components: Composición Inteligente
Compound Components: composición inteligente El patrón Compound Components permite construir componentes flexibles que trabajan juntos mediante composición. Es útil para tabs, accordions, dropdowns, modales y componentes donde.
Del concepto a la práctica
Taller de esta lección
Los compound components son apropiados cuando varias piezas necesitan coordinar una selección común. La decisión importante es que el estado viva en el componente raíz y que cada pieza comunique su intención mediante un valor identificable, en lugar de repartir booleanos como openFirst o showSecond.
Ejemplo resuelto
function FilterGroup({ value, onChange, children }) {
return <section>{React.Children.map(children, child =>
React.isValidElement(child)
? React.cloneElement(child, { selected: child.props.value === value, onChange })
: child
)}</section>;
}
function FilterOption({ value, selected, onChange, children }) {
return <button aria-pressed={selected} onClick={() => onChange(value)}>{children}</button>;
}Con valor "pending", solo esa opción recibe selected=true.
Pruébalo
Crea opciones
all,pendingysent.Renderízalas dentro de
FilterGroup.Haz clic en
senty verifica que la opción antes activa pasa a aria-pressed=false y sent pasa a true.
Comprueba tu resultado
Error frecuente: permitir que cada opción mantenga su propio estado y crear selecciones contradictorias. Corrígelo con una única fuente de verdad.
Ejercicio: añade una opción returned; el resultado esperado es cuatro botones y exactamente uno pulsado tras cada clic.
El padre que usa FilterGroup debe mantener value mediante useState y pasarlo junto a su setter. Esta variante clona hijos directos: un botón dentro de un contenedor no recibe automáticamente las props. Si necesitas anidación libre, utiliza un contexto interno y valida su proveedor.
Mapa de prácticachildren también es una prop: aquí aporta el contenido interior y titulo aporta el encabezado del Panel. El botón Cerrar llama al callback onClose que recibió del padre; el padre decide si mantiene el panel visible.
Ver la infografía en tamaño completo ↗Compound Components: composición inteligente
El patrón Compound Components permite construir componentes flexibles que trabajan juntos mediante composición. Es útil para tabs, accordions, dropdowns, modales y componentes donde varias piezas comparten estado.
La idea principal
En lugar de pasar decenas de props a un componente gigante, exponés piezas relacionadas que se combinan de forma declarativa.
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Trigger value="overview">Resumen</Tabs.Trigger>
<Tabs.Trigger value="metrics">Métricas</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Contenido general</Tabs.Panel>
<Tabs.Panel value="metrics">Contenido de métricas</Tabs.Panel>
</Tabs>Ventajas
- API más expresiva y cercana al HTML.
- Menos props booleanas difíciles de mantener.
- Mayor flexibilidad para ordenar o combinar piezas.
- Mejor separación entre estado compartido y presentación.
Cuándo evitarlo
No uses compound components para componentes simples. Si un botón solo necesita texto, icono y estado disabled, una API con props es suficiente.
Actividad práctica
Diseñá una API de compound components para un Accordion. Debe permitir múltiples items, un trigger por item y contenido desplegable.
Entregable
- Ejemplo de uso del componente.
- Lista de subcomponentes necesarios.
- Explicación de dónde viviría el estado abierto/cerrado.
Sigue con React Intermedio: Patrones y Optimización
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.