React props

Proplar React componentlariga uzatiladigan argumentlardir.

Props componentlarga HTML atributlari orqali uzatiladi.

props xususiyatlarni bildiradi.

React props

React Props JavaScript-dagi funksiya argumentlari va HTML-dagi atributlar kabidir.

Componentga propslarni yuborish uchun HTML atributlari bilan bir xil sintaksisdan foydalaning:

Misol

Car elementiga brand atributini qo‘shing:

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);

Component argumentni props obyekti sifatida qabul qiladi:

Misol

Car componentida brand atributidan foydalaning:

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

Misolni ishga tushirish »

Obyektning nomi props , lekin siz uni xohlaganingizcha chaqirishingiz mumkin.

Misol

Componentda props o‘rniga myobj dan foydalanishingiz mumkin:

function Car(myobj) {
  return (
    <h2>I am a {myobj.brand}!</h2>
  );
}

Misolni ishga tushirish »

Bir nechta xususiyatlarni o‘tkazish

Siz xohlaganingizcha ko‘p xususiyatni yuborishingiz mumkin.

Har bir atribut Car componentiga obyekt xossalari sifatida yuboriladi.

Misol

Car komponentiga bir nechta xususiyat yuboring:

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" model="Mustang" color="red" />
);

Barcha xususiyatlar props obyekti ichidagi Car componentida qabul qilinadi:

Misol

Car componentidagi xususiyat qiymatlaridan foydalaning:

function Car(props) {
  return (
    <h2>I am a {props.color} {props.brand} {props.model}!</h2>
  );
}

Misolni ishga tushirish »

Turli xil ma’lumotlar turlari

React propslari har qanday turdagi ma’lumotlarga ega bo‘lishi mumkin, jumladan o‘zgaruvchilar, raqamlar, stringlar, obyektlar, massivlar va boshqalar.

Stringlar yuqoridagi misollardagidek tirnoq ichida yuborilishi mumkin, lekin raqamlar, o‘zgaruvchilar va obyektlar jingalak qavslar ichida yuborilishi kerak.

Misol

Raqamlar raqamlar sifatida ko‘rib chiqilishi uchun jingalak qavslar ichida yuborilishi kerak:

createRoot(document.getElementById('root')).render(
  <Car year={1969} />
);

Misolni ishga tushirish »

Misol

O‘zgaruvchilar jingalak qavslar ichida yuborilishi kerak:

let x = "Ford";

createRoot(document.getElementById('root')).render(
  <Car brand={x} />
);

Misolni ishga tushirish »

Misol

Obyektlar va massivlar jingalak qavslar ichida yuborilishi kerak:

let x = [1964, 1965, 1966];
let y = {name: "Ford", model: "Mustang"};

createRoot(document.getElementById('root')).render(
  <Car years={x} carinfo={y} />
);

Misolni ishga tushirish »

Obyekt propslari

Component obyektlarga obyektlar kabi munosabatda bo‘ladi va siz xususiyatlarga kirish uchun nuqta belgilaridan foydalanishingiz mumkin.

Misol

Obyekt xususiyatlariga kirish uchun nuqta belgisidan foydalaning:

function Car(props) {
  return (
    <>
      <h2>My {props.carinfo.name} {props.carinfo.model}!</h2>
      <p>It is {props.carinfo.color} and it is from {props.carinfo.year}!</p>
    </>
  );
}

const carInfo = {
  name: "Ford",
  model: "Mustang",
  color: "red",
  year: 1969
};

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

Misolni ishga tushirish »

Massiv propslari

Massiv propslariga indekslar yordamida kirish mumkin.

Misol

Massiv xususiyatlariga kirish uchun indekslardan foydalaning:

function Car(props) {
  return (
    <h2>My car is a {props.carinfo[0]} {props.carinfo[1]}!</h2>
  );
}

const carInfo = ["Ford", "Mustang"];

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

Misolni ishga tushirish »

Proplarni componentdan componentga o‘tkazish

Atributlar, shuningdek, ma’lumotlarni bir componentdan ikkinchisiga parametr sifatida o‘tkazish usulidir.

Misol

Garage componentidan brand atributini Car componentiga yuboring:

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Misolni ishga tushirish »

Eslatma: React Props faqat o‘qish uchun mo‘ljallangan! Agar siz ularning qiymatini o‘zgartirmoqchi bo‘lsangiz, xatoga yo‘l qo‘yasiz.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish