React-да компонентҳои props

Дар дарси гузашта мо чанд намунаи маҳсулотро хориҷ кардем:

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

То ҳол ҳар як даъвати теги маҳсулот як чизро ба экран мебарорад. Биёед ҳоло ҳар як маҳсулотро ягона кунем.

Бигзор, барои намуна, ҳар як маҳсулот бояд ному нарх дошта бошад. Биёед чунон кунем, ки ҳар як даъвати теги маҳсулот маҳсулотро бо nоми хеш ва нархаш, бо тарҳи ба мо зарурӣ, ба экран мебарорад.

Барои ин мо бояд чанд қадамро иҷро кунем.

Барои оғоз, вақте ки теги маҳсулотро даъват мекунем, мо ба ин тег ду атрибут менависем: атрибути 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 аст.

Мақсади ин мафҳум чунин аст: вақте ки теги компонент даъват карда мешавад, ба ин тег метавон атрибутҳои бо додаҳо навишт. Ин додаҳо ба props-и компонент меафтанд. Баъд компонент метавонад ин додаҳоро истифода барад, барои намуна, барои сохтани тарҳи ба мо зарурӣ.

Биёед инро иҷро кунем:

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

Бештар муосир ва бештар суннатӣ ин аст, ки аз объекти props истифода набарда, дар худи параметрҳои функсия destructuring props-ҳоро иҷро кардан:

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

Компоненти Employee-ро созед, ки додаҳои кормандро ба экран мебарорад. Бигзор ин додаҳо фамилия, ном, номи падар ва маош бошанд. Ин додаҳоро бо тарҳи ба шумо зарурӣ оро диҳед. Дар компоненти App се кормандро бо додаҳои гуногун ба экран баред.