Komponentu props React

Iepriekšējā nodarbībā mēs attēlojām vairākus produktu instances:

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

Pagaidām katrs produkta atzīmes izsaukums izvada ekrānā to pašu. Tagad padarīsim katru produktu unikālu.

Pieņemsim, ka, piemēram, katram produktam jābūt nosaukumam un cenai. Padarīsim tā, lai katrs produkta atzīmes izsaukums izvadītu produktu ar savu nosaukumu un cenu, noformētus mums vajadzīgajā izkārtojumā.

Lai to izdarītu, mums jāveic vairākas darbības.

Sākumā, izsaucot produkta atzīmi, mēs šajā atzīmē ierakstīsim divus atribūtus: atribūtu name ar produkta nosaukumu un atribūtu cost ar cenu, šādi:

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

Šo atribūtu nosaukumi un vērtības nonāks objekta veidā pirmajā mūsu komponenta funkcijas-konstruktora parametrā Product:

function Product(props) {
	console.log(props); // objekts ar atslēgām name un cost
	
	return <p>
		product
	</p>;
}

Parametra nosaukums var būt jebkāds, bet React ir ierasts to nosaukt par props. Faktiski tas nav tikai parametra nosaukums, bet svarīga React koncepcija.

Šīs koncepcijas būtība ir šāda: izsaucot komponenta atzīmi, šajā atzīmē var ierakstīt atribūtus ar datiem. Šie dati nonāks komponenta props. Tad komponents var izmantot šos datus, piemēram, lai izveidotu vajadzīgo izkārtojumu.

Izpildīsim to:

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

Ērtāk un vairāk pieņemts neizmantot objektu props, bet uzreiz veikt destrukturizāciju props tieši funkcijas parametros:

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

Izveidojiet komponentu Employee, kas izvada darbinieka datus ekrānā. Lai šie dati būtu uzvārds, vārds, patronīms un alga. Noformējiet šos datus sev vajadzīgajā izkārtojumā. Izvadiet komponentā App trīs darbiniekus ar dažādiem datiem.