React

Props

Bir xil komponentni turli ma'lumotlar bilan ko'rsatishni istaymiz. Masalan, bitta Card komponenti turli ismlar bilan chiqishi kerak. Buning uchun React'da props (properties — xossalar) mexanizmi mavjud. Ushbu darsda komponentga tashqaridan ma'lumot uzatishni o'rganamiz.

Props nima?

Props — bu ota (parent) komponentdan bola (child) komponentga uzatiladigan ma'lumot. Ularni oddiy JavaScript funksiyasining argumentlari deb tasavvur qiling: siz komponentga qandaydir qiymat berasiz, u shu qiymatga qarab turlicha ko'rinadi.

Props'ni JSX'da xuddi HTML atributlari kabi yozamiz. Masalan, Salom komponentiga ism nomli prop uzatamiz:

<Salom ism="Ali" />
<Salom ism="Vali" />

Komponent ichida bu props'lar bitta obyekt sifatida keladi. Odat bo'yicha bu parametr props deb ataladi:

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

Ya'ni ism="Ali" yozganda, komponent ichida props.ism qiymati "Ali" bo'ladi. Shu tariqa bitta komponent turli ma'lumotlar bilan ishlaydi.

Turli xil qiymatlarni uzatish

Props sifatida faqat matn emas, har qanday JavaScript qiymatini uzatish mumkin: son, mantiqiy qiymat, massiv, obyekt, hatto funksiya. Matn bo'lmagan qiymatlarni { } qavslar ichida beramiz:

<Profile
  ism="Ali"
  yosh={25}
  faol={true}
  qiziqishlar={["kod", "kitob"]}
/>

Komponent ichida esa ularni odatdagidek o'qiymiz:

function Profile(props) {
  return (
    <div>
      <h2>{props.ism}, {props.yosh} yosh</h2>
      <p>Holati: {props.faol ? "faol" : "nofaol"}</p>
      <p>Qiziqishlar soni: {props.qiziqishlar.length}</p>
    </div>
  );
}
Diqqat: matn qiymatni tirnoq bilan (ism="Ali"), boshqa har qanday qiymatni qavs bilan (yosh={25}) beramiz. yosh="25" yozsangiz, bu son emas, matn bo'ladi!

Props'ni destructuring qilish

Har safar props.ism, props.yosh deb yozish uzun bo'ladi. JavaScript'dan tanish destructuring yordamida buni qulaylashtiramiz. Odatda destructuring'ni to'g'ridan-to'g'ri funksiya parametrida bajaramiz:

function Profile({ ism, yosh, faol }) {
  return (
    <div>
      <h2>{ism}, {yosh} yosh</h2>
      <p>{faol ? "faol" : "nofaol"}</p>
    </div>
  );
}

Bu — avvalgi kod bilan bir xil ishlaydi, faqat ancha toza va o'qilishi oson. Ko'pchilik React kodi aynan shu uslubda yoziladi.

Destructuring'da standart qiymat (default value) ham berish mumkin — agar prop uzatilmasa, shu qiymat ishlatiladi:

function Tugma({ matn = "Bosing", turi = "oddiy" }) {
  return <button className={turi}>{matn}</button>;
}
// <Tugma /> => matn: "Bosing", turi: "oddiy"
// <Tugma matn="Saqlash" /> => matn: "Saqlash"
Destructuring va standart qiymatlar — bu sof JavaScript imkoniyatlari. React ularni maxsus qilib chiqmaydi, shunchaki funksiya parametrlaridan foydalanadi.

children propi

Ba'zan komponentga oddiy atribut emas, balki uning teglari orasidagi kontentni uzatishni istaymiz — xuddi HTML'da <div>...</div> ichiga narsa qo'ygan kabi. React buni maxsus children propi orqali beradi.

Masalan, Card komponenti — bu ramka, uning ichiga istalgan kontent joylashtirmoqchimiz:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

Endi uni ochilib-yopiladigan teg sifatida ishlatamiz. Teglar orasidagi hamma narsa children bo'lib keladi:

function App() {
  return (
    <Card>
      <h2>Sarlavha</h2>
      <p>Bu — karta ichidagi matn.</p>
    </Card>
  );
}

Natijada Card ichidagi {children} o'rniga <h2> va <p> chiqadi. Bu — o'rovchi (wrapper) komponentlar yaratishning asosiy usuli: modal oynalar, panellar, ramkalar shu tariqa quriladi.

children — bu React tomonidan avtomatik beriladigan maxsus prop. Siz uni qo'lda yozmaysiz — u teglar orasidagi kontentdan to'ldiriladi.

Props faqat o'qish uchun (immutable)

Bu — React'ning eng muhim qoidalaridan biri: komponent o'z props'larini o'zgartira olmaydi. Props — faqat o'qish uchun (read-only, immutable). Quyidagi kod qat'iyan man etiladi:

function Profile({ ism }) {
  ism = "Boshqa ism"; // MUMKIN EMAS! Props'ni o'zgartirmang
  return <h1>{ism}</h1>;
}

Nima uchun bunday qoida bor? React'da ma'lumot oqimi bir yo'nalishli (one-way data flow): ma'lumot yuqoridan (ota komponentdan) pastga (bola komponentga) oqadi. Agar bola o'z props'ini o'zgartira olsa, ma'lumot manbasi tushunarsiz bo'lib qolar va xatolarni topish qiyinlashardi.

React hujjatlarida buni shunday ifodalaydi: "Barcha React komponentlari o'z props'lariga nisbatan sof funksiya (pure function) kabi ishlashi kerak." Ya'ni bir xil props uchun har doim bir xil natija qaytarishi lozim.

Agar komponent ichida vaqt o'tishi bilan o'zgaradigan ma'lumot kerak bo'lsa (masalan, tugma bosilganda hisoblagich oshsa), props emas — state (holat) ishlatiladi. Bu keyingi darsimiz mavzusi.

Xulosa