React komponentleriniň proplary

Öňki sapakda biz birnäçe önüm nusgalaryny görkezdik:

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

Häzirlikçe her bir önüm teginiň çagyrylmagy ekrana şol bir zady görkezýär. Indi her bir önümi üýtgeşik edeliň.

Meselem, her bir önümiň ady we bahasy bolmaly. Şeýle edeliň, her bir önüm teginiň çagyrylmagy öz ady we bahasy bilen, bize gerek görnüşde çykyş edilsin.

Bunun üçin biz birnäçe ädimi ýerine ýetirmeli.

Başlangyçda, önüm tegini çagyrýarka, bu tege iki atribut ýazarys: önümiň ady bilen name atributy we bahasy bilen cost atributy, şeýle:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Bu atributlaryň adlary we bahalary biziň Product komponentimiziň funksiýa-konstruktorynyň ilkinji parametrine obýekt görnüşinde düşer:

function Product(props) {
	console.log(props); // name we cost açarlary bilen obýekt
	
	return <p>
		product
	</p>;
}

Parametriň ady islendik bolup biler, ýöne React-da ony props diýip atlandyrmak kabul edilendir. Aslynda bu diňe parametriň ady däl, eýsem Reaktyň möhüm düşünjesi.

Bu düşünjäniň mazmuny şondan ybarat: komponent tegini çagyrýarka, bu tege maglumatlar bilen atributlar ýazyp bolýar. Bu maglumatlar komponentiň proplaryna düşer. Soňra komponent bu maglumatlary, meselem, gerek görnüşi döretmek üçin ulanyp biler.

Geliň muny edeliň:

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

Has amatly we has kabul edileni, props obýektini ulamak däl, eýsem derrew destrukturizasiýany funksiýanyň parametrlerinde ýerine ýetirmekdir:

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

Employee komponentini ýasaň, ekrana işgäriň maglumatlaryny görkezýän. Bu maglumatlar familiýa, ad, atasynyň ady we aýlyk haky bolsun. Bu maglumatlary özüňize gerek görnüşde bezejip görkeziň. App komponentinde üç sany dürli maglumatly işgäri görkeziň.