Component Composition — children, slot pattern

~15 daq · React · Component Patterns

Muammo: qattiq bog'langan komponentlar

Modal yaratyapsiz. Birinchi versiya:

function Modal({ sarlavha, matn, tugmaMatni }) {
  return (
    <div className="modal">
      <h2>{sarlavha}</h2>
      <p>{matn}</p>
      <button>{tugmaMatni}</button>
    </div>
  );
}

Ishlaydi. Lekin bir kuni modal ichiga forma kerak bo'ldi. Keyin rasm kerak bo'ldi. Keyin ikki tugma kerak bo'ldi. Har safar yangi props qo'shiladi — Modal tobora murakkablashadi.

Muammo: Modal nima ko'rsatilishini oldindan bilishga harakat qilmoqda. Bu noto'g'ri yondashuv.

Composition — Modal faqat "o'rov" bo'ladi. Ichiga nima solinishini tashqaridan belgilanadi.

children — asosiy composition usuli

function Modal({ sarlavha, children }) {
  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>{sarlavha}</h2>
        <div className="modal-body">
          {children}  {/* tashqaridan berilgan kontent */}
        </div>
      </div>
    </div>
  );
}

Endi Modal ichiga istalgan narsa solinadi:

// Oddiy matn
<Modal sarlavha="Ogohlantirish">
  <p>Haqiqatan o'chirmoqchimisiz?</p>
  <button>Ha</button>
  <button>Yo'q</button>
</Modal>

// Forma
<Modal sarlavha="Profil tahrirlash">
  <form>
    <input placeholder="Ism" />
    <input placeholder="Email" />
    <button type="submit">Saqlash</button>
  </form>
</Modal>

// Rasm
<Modal sarlavha="Rasm ko'rish">
  <img src="/rasm.jpg" alt="Rasm" style={{ width: '100%' }} />
</Modal>

Bir xil Modal — uch xil kontent. Modal o'zgarmadi.

Slot pattern — bir nechta joy

Ba'zan komponentda bir nechta "joy" kerak bo'ladi — sarlavha, kontent, footer alohida-alohida. children faqat bitta joy beradi. Slot pattern — bir nechta joy uchun.

function Karta({ sarlavha, kontent, footer }) {
  return (
    <div className="karta">
      <div className="karta-sarlavha">
        {sarlavha}
      </div>
      <div className="karta-kontent">
        {kontent}
      </div>
      {footer && (
        <div className="karta-footer">
          {footer}
        </div>
      )}
    </div>
  );
}

<Karta
  sarlavha={<h3>Foydalanuvchi</h3>}
  kontent={
    <div>
      <p>Ali Valiyev</p>
      <p>ali@gmail.com</p>
    </div>
  }
  footer={
    <div>
      <button>Tahrirlash</button>
      <button>O'chirish</button>
    </div>
  }
/>

Props sifatida JSX yuborilmoqda. Bu — slot pattern. Har bir "joy" alohida props orqali beriladi.

Composition ning kuchi

❌ Yomon — Modal hamma narsani biladi
<Modal
  sarlavha="..."
  matn="..."
  tugma1Matni="..."
  tugma1Rang="..."
  tugma2Matni="..."
  ikonaBormi={true}
  ikonaUri="..."
/>

✅ Yaxshi — Modal faqat o'rov
<Modal sarlavha="...">
  <p>Matn</p>
  <img src="..." />
  <div>
    <button>Ha</button>
    <button>Yo'q</button>
  </div>
</Modal>

Birinchisida Modal 10 ta props oladi va hali ham yetmaydi. Ikkinchisida Modal 1 ta props oladi — istalgan kontent beriladi.

Amaliy misol — Layout

function Layout({ sidebar, children }) {
  return (
    <div className="layout">
      <nav className="sidebar">
        {sidebar}
      </nav>
      <main className="kontent">
        {children}
      </main>
    </div>
  );
}

// Ishlatish
<Layout
  sidebar={
    <ul>
      <li>Bosh sahifa</li>
      <li>Mahsulotlar</li>
      <li>Sozlamalar</li>
    </ul>
  }
>
  <h1>Mahsulotlar sahifasi</h1>
  <MahsulotRoyxati />
</Layout>

Xulosa

Composition — komponentni "o'rov" qilib, ichiga nima solinishini tashqaridan belgilash.

children     → bitta joy uchun
slot pattern → bir nechta joy uchun (props sifatida JSX)

Komponent qanchalik kam narsa bilsa — shunchalik moslashuvchan. Modal faqat "modal ko'rinishi" ni biladi, ichida nima borligini bilmaydi.

Keyingi dars

31-dars: Higher Order Component — HOC nima, qachon kerak