React Academy · Lección

Slots con nombre mediante props de objeto

Implemente slots de header, body y footer pasando JSX mediante props con nombre.

Slots con nombre mediante props de objeto es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección implementará slots con nombre flexibles pasando JSX mediante props con nombre, lo que permite crear componentes de diseño con regiones de encabezado, cuerpo y pie de página sin una estructura rígida de children.

La limitación de children

Una única prop `children` funciona para una región. Cuando un componente necesita varias regiones de contenido independientes, como una tarjeta con encabezado y pie de página, la solución más clara consiste en utilizar props con nombre que contengan JSX.

Slots mediante props con nombre

Defina una prop para cada slot en la interfaz del componente. El padre pasa JSX a cada prop. El componente representa cada slot en la posición correcta.

function Card({ header, body, footer }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{body}</div>
      <div className="card-footer">{footer}</div>
    </div>
  );
}

// Usage
<Card
  header={<h2>Title</h2>}
  body={<p>Content here</p>}
  footer={<button>OK</button>}
/>

Slots opcionales

Haga que los slots sean opcionales representándolos únicamente cuando la prop sea truthy. Así, el mismo componente puede funcionar con pie de página o sin él, por ejemplo.

function Card({ header, children, footer }) {
  return (
    <div>
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

Combinar children y slots con nombre

Utilice `children` para la región de contenido principal y props con nombre para las regiones secundarias. Esto sigue el principio de que el caso de uso más común debe ser el más sencillo de utilizar.

<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript: tipado de slots con nombre

Tipifique las props de los slots con nombre como `React.ReactNode` para aceptar cualquier contenido JSX.

interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

Slots con nombre frente a componentes compuestos

Las props con nombre son sencillas y explícitas. Los componentes compuestos, como ``, resultan más cómodos para familias de componentes complejas, pero requieren una configuración adicional con Context. Comience con props con nombre y migre si es necesario.

Pasar componentes como slots

También puede tipar un slot como un componente de React, no como JSX. El padre pasa una referencia al componente y el diseño lo representa. Esto permite que el diseño controle cuándo y cuántas veces se representa el slot.

function Timeline({ renderItem, items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

<Timeline
  items={data}
  renderItem={item => <EventCard event={item} />}
/>

Composición de diseños con slots con nombre

Los componentes de diseño de páginas utilizan ampliamente los slots con nombre. Un componente contenedor de página con slots `sidebar`, `toolbar` y `content` permite que distintas páginas compongan el mismo contenedor con contenido completamente diferente en cada región.

Documentar los slots con nombre

Los slots con nombre se documentan por sí mismos mediante interfaces de TypeScript o PropTypes. Los consumidores pueden ver exactamente qué slots están disponibles y cuáles son opcionales, lo que reduce la necesidad de documentación externa.

Comprobación rápida

¿Qué tipo de TypeScript debe utilizar para una prop de slot con nombre que acepte cualquier JSX?

Repaso

Las props de slots con nombre hacen que los componentes de diseño sean flexibles y se documenten por sí mismos. Utilice children para la región principal, props con nombre para las regiones secundarias y tipifíquelas como React.ReactNode.

A continuación

Siguiente lección: **Cloning & Injecting Props with cloneElement**; utilizará React.cloneElement para pasar props ocultas desde un padre a sus children.

Preguntas frecuentes

¿La lección «Slots con nombre mediante props de objeto» es gratis?

Sí — el texto completo de «Slots con nombre mediante props de objeto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Slots con nombre mediante props de objeto»?

Implemente slots de header, body y footer pasando JSX mediante props con nombre. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Slots con nombre mediante props de objeto»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Fundamentos de props.children
Utilidades de React.Children
Slots con nombre mediante props de objeto
Clonación e inyección de props con cloneElement

← Volver a React Academy