Nesne Props'larıyla Adlandırılmış Yuvalar

Hoş Geldiniz

Alt Öğenin Sınırlılığı

Adlandırılmış Özellik Yuvaları

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

İsteğe Bağlı Yuvalar

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

Alt Öğeleri ve Adlandırılmış Yuvaları Birlikte Kullanma

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

TypeScript: Adlandırılmış Yuvaları Türlendirme

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

Adlandırılmış Yuvalar ve Birleşik Bileşenler

Bileşenleri Yuva Olarak Aktarma

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

Adlandırılmış Yuvalarla Düzen Birleştirme

Adlandırılmış Yuvaları Belgeleme

Hızlı Kontrol

Özet

Sırada