Reactda Komponentlarning Proplari

Oldingi darsda biz bir nechta mahsulot namunalarini chiqardik:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Hozircha har bir mahsulot tegi chaqiruvi ekranda bir xil narsani chiqaradi. Keling, endi har bir mahsulotni noyob qilaylik.

Masalan, har bir mahsulotning nomi va narxi bo'lsin. Keling, har bir mahsulot tegi chaqiruvi o'z nomi va narxi bilan, biz xohlagan verstkada shakllantirilgan mahsulotni chiqarsin.

Buning uchun bizga bir necha qadamlar bajarish kerak bo'ladi.

Boshlash uchun, mahsulot tegi chaqirilganda biz ushbu tegga ikkita atribut yozamiz: mahsulot nomi uchun name atributi va narxi uchun cost atributi, mana shunday:

function App() {
	return <div>
		<Product name="mahsulot1" cost="100" />
		<Product name="mahsulot2" cost="200" />
		<Product name="mahsulot3" cost="300" />
	</div>;
}

Ushbu atributlarning nomlari va qiymatlari bizning Product komponentimizning funktsiya-konstruktorining birinchi parametriga obyekt ko'rinishida tushadi:

function Product(props) {
	console.log(props); // name va cost kalitlariga ega obyekt
	
	return <p>
		mahsulot
	</p>;
}

Parametr nomi ixtiyoriy bo'lishi mumkin, lekin React-da odatda uni props deb nomlashadi. Aslida bu nafaqat parametr nomi, balki Reactning muhim konsepsiyasidir.

Ushbu konsepsiyaning mazmuni quyidagicha: komponent tegini chaqirishda, ushbu tegga ma'lumotli atributlar yozish mumkin. Ushbu ma'lumotlar komponentning proplari ga tushadi. Keyin komponent ushbu ma'lumotlardan, masalan, kerakli verstkani yaratish uchun foydalanishi mumkin.

Keling, buni amalga oshiramiz:

function Product(props) {
	return <p>
		nom: <span>{props.name}</span>,
		narx: <span>{props.cost}</span>
	</p>;
}

props obyektidan foydalanmaslik, balki darhol funktsiya parametrlarida proplarni destrukturalash bajarish qulayroq va odat tusgan:

function Product({ name, cost }) {
	return <p>
		nom: <span>{name}</span>,
		narx: <span>{cost}</span>
	</p>;
}

Employee komponentini yarating, u xodimning ma'lumotlarini ekranga chiqarsin. Ushbu ma'lumotlar familiya, ism, sharif va maosh bo'lsin. Ushbu ma'lumotlarni o'zingiz xohlagan verstkada shakllantiring. App komponentida turli ma'lumotlarga ega bo'lgan uchta xodimni chiqaring.