React-da Komponent Propları

Əvvəlki dərsdə biz bir neçə məhsul nümunəsi çıxartdıq:

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

Hələ ki, hər bir məhsul teqi çağırışı ekranda eynı şeyi göstərir. Gəlin indi hər bir məhsulu unikal edək.

Məsələn, hər bir məhsulun adı və qiyməti olsun. Elə edək ki, hər bir məhsul teqi çağırışı öz adı və qiyməti olan, bizim üçün lazımi görüntüdə hazırlanmış məhsulu göstərsin.

Bunun üçün bir neçə addım atmalıyıq.

Əvvəlcə, məhsul teqini çağırarkən biz bu teqə iki atribut yazacıq: məhsulun adı üçün name atributu və qiyməti üçün cost atributu, belə:

function App() {
	return <div>
		<Product name="məhsul1" cost="100" />
		<Product name="məhsul2" cost="200" />
		<Product name="məhsul3" cost="300" />
	</div>;
}

Bu atributların adları və dəyərləri bizim Product komponentimizin funksiya-konstruktorunun ilk parametrinə obyekt şəklində düşəcək:

function Product(props) {
	console.log(props); // name və cost açarı olan obyekt
	
	return <p>
		məhsul
	</p>;
}

Parametrin adı istənilən ola bilər, amma React-da onu props adlandırmaq qəbul edilib. Əslində bu, sadəcə parametr adı deyil, Reactın mühüm konsepsiyasıdır.

Bu konsepsiyanın mahiyyəti belədir: komponent teqini çağırarkən bu teqə məlumatlı atributlar yazmaq olar. Bu məlumatlar komponentin proplarına düşəcək. Sonra komponent bu məlumatlardan, məsələn, lazımi görüntünü yaratmaq üçün istifadə edə bilər.

Gəlin bunu edək:

function Product(props) {
	return <p>
		ad: <span>{props.name}</span>,
		qiymət: <span>{props.cost}</span>
	</p>;
}

Daha rahat və daha qəbul edilən olan, props obyektindən istifadə etməmək, əvəzində funksiyanın parametrlərində birbaşa propların destrukturizasiyasını etməkdir:

function Product({ name, cost }) {
	return <p>
		ad: <span>{name}</span>,
		qiymət: <span>{cost}</span>
	</p>;
}

Employee komponenti hazırlayın, ekranda işçinin məlumatlarını göstərsin. Bu məlumatlar soyad, ad, ata adı və maaş olsun. Bu məlumatları istədiyiniz görüntüdə tərtib edin. App komponentində fərqli məlumatları olan üç işçi çıxardın.