React props destrukturizatsiyasi
Destrukturizatsiya (Destructuring)
Component oladigan xususiyatlarni destrukturadan foydalanib cheklashingiz mumkin.
Misol
Component unga faqat color xususiyati kerakligini biladi, shuning uchun funksiya ta’rifida u faqat quyidagilarni belgilaydi:
function Car({color}) {
return (
<h2>My car is {color}!</h2>
);
}
createRoot(document.getElementById('root')).render(
<Car brand="Ford" model="Mustang" color="red" year={1969} />
);
{color}.Siz component ichida kerakli xususiyatlarni ham yo‘q qilishingiz mumkin.
Shunday qilib, component barcha xususiyatlarni oladi, ammo destrukturizatsiya faqat kerakli xususiyatlardan foydalanishiga ishonch hosil qiladi.
Misol
Component barcha xususiyatlarni oladi, lekin component ichidagi xususiyatlarni cheklash uchun destruksiyadan foydalanadi.
function Car(props) {
const {brand, model} = props;
return (
<h2>I love my {brand} {model}!</h2>
);
}
createRoot(document.getElementById('root')).render(
<Car brand="Ford" model="Mustang" color="red" year={1969} />
);
Destructuring ...rest
Qancha xususiyat olishingizni bilmasangiz, ...rest operatoridan foydalanishingiz mumkin.
Ma’nosi: kerakli xususiyatlarni belgilashingiz mumkin, qolganlari esa obyektda saqlanadi.
Misol
Component rang va brendni belgilaydi, ammo qolganlari quyidagi kabi obyektda saqlanadi:
{ model: "Mustang", year: 1969 } .
function Car({color, brand, ...rest}) {
return (
<h2>My {brand} {rest.model} is {color}!</h2>
);
}
createRoot(document.getElementById('root')).render(
<Car brand="Ford" model="Mustang" color="red" year={1969} />
);
Standart qiymatlar
Destructing yordamida siz props uchun standart qiymatlarni o‘rnatishingiz mumkin.
Agar xususiyat hech qanday qiymatga ega bo‘lmasa, standart qiymat ishlatiladi.
Misol
Standart rang qiymatini "ko‘k" ga o‘rnating:
function Car({color = "blue", brand}) {
return (
<h2>My {color} {brand}!</h2>
);
}
createRoot(document.getElementById('root')).render(
<Car brand="Ford" />
);
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!