Composición: compound components e inyección

Los compound components —<Tabs> con sus <Tab>, <Menu> con sus <Item>— son la prueba de fuego de la composición. En React se resuelven clonando hijos e inyectándoles props. En Solid ese camino está cerrado: no hay descriptores que clonar. La buena noticia es que las alternativas de Solid —context y hijos como función— son más robustas y componen mejor. Este nivel te da el patrón completo.

El problema: inyectar sin cloneElement

El patrón React clásico es Children.map + cloneElement(child, { seleccionado }): recorres los hijos-descriptor y devuelves copias con props nuevas. En Solid esto no puede existir, y no por falta de API: un hijo resuelto ya es un nodo DOM con sus props ya aplicadas. No hay plano que reeditar. Así que la comunicación padre-hijo viaja por otras dos vías: el grafo reactivo (context) y el límite de función (render props).

flowchart TD
P[Tabs Provider] --> CTX[TabsContext con api]
CTX --> T1[Tab uno se registra]
CTX --> T2[Tab dos se registra]
T1 --> REG[lista de labels]
T2 --> REG
REG --> BAR[tablist con botones]
P --> BODY[props.children con los paneles]
style CTX fill:#89b4fa,color:#11111b
style REG fill:#a6e3a1,color:#11111b

Patrón A: context (la vía idiomática)

El padre crea un Context con su API reactiva; los hijos la consumen con useContext. Cada Tab se auto-registra al ejecutarse —recuerda: los componentes corren una vez, en orden— y decide si mostrarse según el signal compartido.

import {
  createContext, useContext, createSignal, For, Show, type JSX,
} from "solid-js";

type TabsApi = {
  activo: () => number;
  activar: (i: number) => void;
  registrar: (label: string) => number;
};
const TabsCtx = createContext<TabsApi>();

function Tabs(props: { children: JSX.Element }) {
  const [activo, setActivo] = createSignal(0);
  const [labels, setLabels] = createSignal<string[]>([]);
  const api: TabsApi = {
    activo,
    activar: setActivo,
    registrar(label) {
      const idx = labels().length;
      setLabels((prev) => [...prev, label]);
      return idx;
    },
  };
  return (
    <TabsCtx.Provider value={api}>
      <div role="tablist">
        <For each={labels()}>
          {(label, i) => (
            <button
              role="tab"
              aria-selected={api.activo() === i()}
              onClick={() => api.activar(i())}
            >
              {label}
            </button>
          )}
        </For>
      </div>
      {props.children}
    </TabsCtx.Provider>
  );
}

function Tab(props: { label: string; children: JSX.Element }) {
  const api = useContext(TabsCtx)!;
  const idx = api.registrar(props.label);
  return <Show when={api.activo() === idx}>{props.children}</Show>;
}

El uso queda declarativo y sin fugas de estado:

<Tabs>
  <Tab label="Perfil">Datos del perfil</Tab>
  <Tab label="Ajustes">Panel de ajustes</Tab>
</Tabs>

Patrón B: hijos como función

Cuando lo que quieres es inyectar un valor en el hijo, la vía directa es que el hijo sea una función y llamarla con ese valor. Es el equivalente de Solid a las scoped slots de Vue:

function Estado<T>(props: {
  inicial: T;
  children: (par: [() => T, (v: T) => void]) => JSX.Element;
}) {
  const par = createSignal(props.inicial);
  return <>{props.children(par)}</>;
}

// uso: el hijo recibe el estado inyectado
<Estado inicial={0}>
  {([n, setN]) => (
    <button onClick={() => setN(n() + 1)}>Van {n()}</button>
  )}
</Estado>;

Recuerda la regla de aridad del primer nivel: children() no resolvería esta función —tiene un parámetro, así que la deja intacta—. Por eso un componente puede soportar ambas formas y ramificar con typeof props.children === "function".

children() frente a context

Cuándo entra children() en un compound component: cuando el padre necesita introspeccionar el subárbol —contar hijos, envolverlos, leer su orden— en vez de comunicarse con ellos. Context es para hablar con los hijos; children() es para mirarlos. Un SegmentedControl que envuelve cada opción en un botón usa children().toArray(); un Tabs que coordina estado usa context. Muchos componentes maduros combinan ambos: context para el estado, children() para maquetar.

// children() para introspeccion: envolver cada opcion en un boton
function SegmentedControl(props: { children: JSX.Element }) {
  const opciones = children(() => props.children);
  const [activo, setActivo] = createSignal(0);
  return (
    <div class="segmented" role="group">
      <For each={opciones.toArray()}>
        {(op, i) => (
          <button aria-pressed={activo() === i()} onClick={() => setActivo(i())}>
            {op}
          </button>
        )}
      </For>
    </div>
  );
}

Aquí no hay context ni registro: el padre mira sus hijos y los reviste. La regla mnemónica es limpia: si el hijo necesita saber algo del padre, usa context; si el padre necesita hacer algo con la forma de los hijos, usa children().