Пропси на компоненти во 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 три вработени со различни податоци.