Reactтеги компоненттердин пропсу

Мурунку сабакта биз бир нече продукттун үлгүлөрүн чыгардык:

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

Азырынча ар бир продукт тегинин чакырылышы экранга бир эле нерсени чыгарып жатат. Келгиле, азыр ар бир продуктту уникалдуу кылалы.

Мисал үчүн, ар бир продукттун аталышы жана баасы болсун. Ар бир продукт тегинин чакырылышы өз аты менен баасы бар продуктту, бизге керектуу версткага ылайык кылып, чыгарсын.

Бул үчүн бизге бир нече кадамдарды аткаруу керек.

Башында, продукт тегин чакырганда, биз бул тегке эки атрибут жазабыз: продукттун аталышы үчүн name атрибуту жана баасы үчүн cost атрибуту, мындай:

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

Бул атрибуттардын аттары жана маанилери биздин Product компонентүбүздүн функция-куруучусунун биринчи параметрине объект түрүндө түшөт:

function Product(props) {
	console.log(props); // name жана cost ачкычтары бар объект
	
	return <p>
		product
	</p>;
}

Параметрдин аты каалагандай болушу мүмкүн, бирок Reactта аны props деп аташтырган. Негизинде, бул жөнөкөй параметрдин аты эмес, ал Reactтин маанилүү түшүнүгү.

Бул түшүнүктүн мааниси төмөнкүдөй: компонент тегин чакырганда, бул тегге маалыматтар менен атрибуттарды жазса болот. Бул маалыматтар компоненттин пропстарына түшөт. Андан кийин компонент бул маалыматтарды колдоно алат, мисалы, керектуу верстканы түзүү үчүн.

Келгиле, муну жасалы:

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

Ыңгайлуураак жана жалпы кабыл алынган ыкма - props объектин колдонбостон, тезирээк функциянын параметрлеринде эле деструктуризация жасаш:

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

Employee компонентин жасаңыз, ал кызматкердин маалыматтарын экранга чыгарсын. Бул маалыматтар фамилия, ысым, атанын ысымы жана эмгек акысы болсун. Бул маалыматтарды өзүңүз көргөнгө окшош версткага ылайык кылыңыз. App компонентинде ар кандай маалыматтары бар үч кызматкерди чыгарыңыз.