Patrón Compound Components en React: Creación de un Componente de Tabs

El patrón Compound Component en React permite crear componentes que colaboran estrechamente entre sí, como un componente principal y sus subcomponentes, para construir funcionalidades complejas de forma modular y flexible. Aquí exploramos cómo construir un sistema de pestañas (tabs), donde el componente padre controla cuál pestaña está activa y los componentes hijos solo gestionan su contenido.

¿Qué es el patrón Compound Component en React?

• Este patrón permite que componentes padres e hijos trabajen juntos para ofrecer funcionalidades avanzadas.
• En nuestro ejemplo, el componente padre (Tabs) decide cuál pestaña está activa, mientras los hijos (Tab) se encargan de renderizar el contenido.
• Es útil para crear componentes reutilizables y modulares en aplicaciones de React, mejorando la flexibilidad y manteniéndolos fáciles de manejar y extender.

¿Cómo se estructura el componente Tab?

Para nuestro componente Tab:

1. Creamos una interfaz que defina las propiedades label (de tipo string) y children (de tipo ReactNode).
2. En el cuerpo del componente, se envuelven los label en una etiqueta estilizada (e.g., cursiva) y el children se coloca en un contenedor.
3. Esto forma un pequeño componente que funcionará con el componente principal (Tabs) para mostrar contenido diferenciado según la pestaña activa.

¿Cómo se implementa el componente Tabs?

Para el componente principal Tabs:

1. Estado Local: Creamos un estado activeIndex para controlar cuál pestaña está activa.
2. Función de Click: handleTabClick recibe el índice de la pestaña seleccionada y actualiza el estado.
3. Filtrado de Elementos Válidos: Aseguramos que solo los hijos válidos de React sean renderizados.
4. Renderizado Condicional: Creamos una lista de pestañas (UL) donde cada pestaña activa se resalta con una clase CSS específica, tap-active.

¿Cómo conectar los componentes para que funcionen juntos?

1. Renderizar los Tabs: Dentro de Tabs, renderizamos cada Tab usando un map, y cada pestaña recibe el label y el contenido.
2. Condiciones de CSS: Usamos clases CSS para marcar la pestaña activa.
3. Mostrar Contenido Activo: El contenido de cada pestaña se renderiza en un espacio dedicado y cambia según el activeIndex.

¿Cómo asegurar la flexibilidad del componente?

• Props en Tabs: El componente Tabs recibe children, permitiendo que cualquier contenido React válido pueda mostrarse en cada Tab.
• Indexación Dinámica: Al dar a cada Tab un índice único, podemos manejar dinámicamente cuál está activa.
• Separación de Estructura y Estilos: Usar un archivo CSS específico para gestionar el estilo asegura que el componente sea fácilmente modificable.