Пропсы кампанентаў у 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 трох работнікаў з рознымі данымі.