Nazwane sloty za pomocą propsów obiektowych

Wprowadzenie

Ograniczenie children

Sloty w nazwanych właściwościach

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>}
/>

Opcjonalne sloty

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>
  );
}

Połączenie children z nazwanymi slotami

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

TypeScript: typowanie nazwanych slotów

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

Nazwane sloty a komponenty złożone

Przekazywanie komponentów jako slotów

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} />}
/>

Komponowanie układu za pomocą nazwanych slotów

Dokumentowanie nazwanych slotów

Szybkie sprawdzenie

Podsumowanie

Następna lekcja