Props — yuborish, qabul qilish, default qiymat, children

~20 daq · React · Kirish va Asoslar

Props nima?

Oldingi darsda MahsulotKarta komponentini yozdik. Lekin har bir mahsulotning nomi, narxi, rasmi boshqacha. Komponentga "bu mahsulot uchun shu ma'lumotlarni ishlat" deb aytish kerak. Buning uchun props ishlatiladi.

Props — bu komponentga tashqaridan beriladigan ma'lumotlar. HTML da <img src="rasm.jpg"> deb atribut berasiz — xuddi shunday React komponentiga ham atribut berasiz.

// Yuborish — xuddi HTML atributi kabi
<MahsulotKarta nom="Noutbuk" narx={8500000} />

// Qabul qilish — funksiya parametri sifatida
function MahsulotKarta(props) {
  return (
    <div>
      <h3>{props.nom}</h3>
      <p>{props.narx}</p>
    </div>
  );
}

Props ni qabul qilish usullari

1. props ob'ekti sifatida

function Salom(props) {
  return <h1>Salom, {props.ism}!</h1>;
}

<Salom ism="Jasur" />
// Natija: Salom, Jasur!

2. Destructuring — ko'p ishlatiladigan usul

function Salom({ ism, yosh }) {
  return <p>{ism} — {yosh} yosh</p>;
}

<Salom ism="Jasur" yosh={25} />

Destructuring — props.ism, props.yosh o'rniga to'g'ridan-to'g'ri ism, yosh deb yozish imkonini beradi. Kod qisqaroq va o'qilishi osonroq.

Props turlari

Props sifatida istalgan JavaScript qiymatini yuborish mumkin.

function Misol({ matn, son, mantiq, massiv, obekt, funksiya }) {
  return <div>{matn}</div>;
}

<Misol
  matn="Salom"              // string — qo'shtirnoq ichida
  son={42}                  // number — {} ichida
  mantiq={true}             // boolean — {} ichida
  massiv={[1, 2, 3]}        // massiv — {} ichida
  obekt={{ ism: 'Ali' }}    // ob'ekt — {} ichida
  funksiya={() => alert('!')} // funksiya — {} ichida
/>

💡 String yuborishda {} shart emas — matn="Salom" yetarli. Boshqa barcha turlar uchun {} kerak.

Default qiymat

Agar props berilmasa nima bo'ladi? undefined bo'ladi. Buning oldini olish uchun default qiymat beriladi.

function Tugma({ matn = 'Bosing', rang = 'ko\'k', hajm = 'o\'rta' }) {
  return (
    <button className={`tugma ${rang} ${hajm}`}>
      {matn}
    </button>
  );
}

// Hamma props berilgan
<Tugma matn="Saqlash" rang="yashil" hajm="katta" />

// Faqat matn berilgan — qolganlar default qiymat oladi
<Tugma matn="Bekor qilish" />

// Hech narsa berilmagan — hammasi default
<Tugma />
// Natija: "Bosing" matni, ko'k rang, o'rta hajm

children — maxsus prop

Ba'zan komponentga tashqaridan kontent berish kerak bo'ladi — xuddi HTML da <div> ichiga narsa yozgandek.

// Oddiy props bilan — cheklangan
<Modal sarlavha="Ogohlantirish" matn="Haqiqatan o'chirmoqchimisiz?" />

// children bilan — istalgan kontent berish mumkin
<Modal sarlavha="Ogohlantirish">
  <p>Haqiqatan o'chirmoqchimisiz?</p>
  <strong>Bu amalni qaytarib bo'lmaydi!</strong>
</Modal>

children — React ning maxsus props i. Komponent teglari orasiga yozilgan hamma narsa children sifatida keladi.

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

children ning kuchi — komponent ichiga nima berilishini oldindan bilmasangiz ham bo'ladi. Modal, Card, Layout kabi "o'rov" komponentlari uchun juda qulay.

// Xuddi shu Modal ni turli kontent bilan ishlatish
<Modal sarlavha="Profil">
  <form>
    <input placeholder="Ism" />
    <input placeholder="Email" />
  </form>
</Modal>

<Modal sarlavha="Rasm">
  <img src="foto.jpg" />
</Modal>

Props — readonly

Props ni komponent ichida o'zgartirish mumkin emas. Bu React ning asosiy qoidasi.

function Salom({ ism }) {
  ism = 'Boshqa ism'; // ❌ Xato — props ni o'zgartirish mumkin emas
  return <h1>Salom, {ism}!</h1>;
}

Nima uchun? Props tashqaridan keladi — ota komponent beradi. Agar bola komponent uni o'zgartirsa, ota komponent bilmaydi. Bu chalkashlikka olib keladi.

Ma'lumotni o'zgartirish kerak bo'lsa — state ishlatiladi. Bu keyingi bo'limda.

Amaliy misol

function UserKarta({ ism, lavozim, rasm, faol = true }) {
  return (
    <div className="user-card">
      <img src={rasm} alt={ism} className="avatar" />
      <div className="info">
        <h3>{ism}</h3>
        <p>{lavozim}</p>
        <span className={faol ? 'yashil' : 'kulrang'}>
          {faol ? 'Online' : 'Offline'}
        </span>
      </div>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserKarta
        ism="Jasur Toshmatov"
        lavozim="Frontend Developer"
        rasm="/jasur.jpg"
        faol={true}
      />
      <UserKarta
        ism="Malika Yusupova"
        lavozim="UI Designer"
        rasm="/malika.jpg"
        faol={false}
      />
      <UserKarta
        ism="Bobur Rahimov"
        lavozim="Backend Developer"
        rasm="/bobur.jpg"
        // faol berilmadi — default true bo'ladi
      />
    </div>
  );
}

Tez-tez uchraydigan xatolar

Props nomi katta-kichik harfga sezgir:

<Salom Ism="Jasur" />  // ❌ — Ism katta harf bilan

function Salom({ ism }) {  // ism kichik harf bilan
  return <h1>{ism}</h1>;   // undefined chiqadi
}

Ob'ektni to'g'ridan-to'g'ri render qilish:

const user = { ism: 'Ali', yosh: 25 };

<Salom user={user} />

function Salom({ user }) {
  return <h1>{user}</h1>;  // ❌ Xato: Objects are not valid as a React child
  return <h1>{user.ism}</h1>;  // ✅ To'g'ri
}

Boolean props:

// Bu ikkalasi bir xil — true yuborish
<Tugma faol={true} />
<Tugma faol />       // qisqa yozuv

// false yuborish uchun {} kerak
<Tugma faol={false} />

Xulosa

Props — komponentga tashqaridan beriladigan ma'lumotlar.

• Yuborish: <Komponent nom="qiymat" son={42} />
• Qabul qilish: function Komponent({ nom, son }) {}
• Default qiymat: function Komponent({ rang = 'ko\'k' }) {}
• children — teglari orasidagi kontent
• Props readonly — o'zgartirish mumkin emas

Keyingi dars

7-dars: Props — readonly nima uchun, prop drilling muammosi