Props

React Props

Props - bu React komponentlariga o'tkazilgan argumentlar.

Props komponentlarga HTML atributlari orqali uzatiladi.

Props - bu "properties" (xususiyatlar) degan ma'noni anglatadi.

React Props

React Props JavaScript-dagi funksiyalar uchun argumentlar va HTML atributlariga o'xshaydi.

Propslarni komponentga uzatish uchun, HTML atributlari sintaksisidan foydalaning:

Misol Car elementiga "brand" atributini qo'shing:

const myElement = <Car brand="Ford" />;

Komponent argumentni props obyekt sifatida qabul qiladi:

Misol Car komponentida brand atributini ishlatish:

function Car(props) {
  return <h2>Men {props.brand}man!</h2>;
}

Ma'lumot Uzatish

Propslar sizga bir komponentdan ikkinchi komponentga ma'lumot uzatishga imkon beradi.

Misol Garage komponentidan Car komponentiga "brand" xususiyatini uzatish:

function Car(props) {
  return <h2>Men {props.brand}man!</h2>;
}
 
function Garage() {
  return (
    <>
      <h1>Menim garajimda kim yashaydi?</h1>
      <Car brand="Ford" />
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Agar uzatmoqchi bo'lganingiz o'zgaruvchi bo'lsa, yuqoridagi misoldagidek qator o'rniga o'zgaruvchi nomini qavs ichiga qo'ying:

Misol carName nomli o'zgaruvchini yarating va uni Car komponentiga uzating:

function Car(props) {
  return <h2>Men {props.brand}man!</h2>;
}
 
function Garage() {
  const carName = 'Ford';
  return (
    <>
      <h1>Menim garajimda kim yashaydi?</h1>
      <Car brand={carName} />
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Agar ob'ekt bo'lsa:

Misol carInfo nomli ob'ekt yarating va uni Car komponentiga uzating:

function Car(props) {
  return <h2>Men {props.brand.model}man!</h2>;
}
 
function Garage() {
  const carInfo = { name: 'Ford', model: 'Mustang' };
  return (
    <>
      <h1>Menim garajimda kim yashaydi?</h1>
      <Car brand={carInfo} />
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Eslatma

React Props o'qish uchun mo'ljallangan va o'zgartirishga ruxsat etilmaydi! Agar siz ularning qiymatini o'zgartirmoqchi bo'lsangiz, xato xabari olasiz.

React Props

React Props

Ma'lumot Uzatish

Ushbu sahifada