Komponentų propsai React

Ankstesnėje pamokoje mes atvaizdavome kelis produktų egzempliorius:

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

Kol kas kiekvienas produkto žymės iškvietimas atvaizduoja ekrane tą patį. Dabar padarykime kiekvieną produktą unikalų.

Tarkime, pavyzdžiui, kiekvienas produktas turi turėti pavadinimą ir kainą. Padarykime taip, kad kiekvienas produkto žymės iškvietimas atvaizduotų produktą su savo vardu ir kaina, suformatuotais mums reikalingoje išdėstyme.

Norėdami tai padaryti, turime atlikti kelis žingsnius.

Pirmiausia, kviesdami produkto žymę, mes į šią žymę įrašysime du atributus: atributą name su produkto pavadinimu ir atributą cost su kaina, štai taip:

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

Šių atributų pavadinimai ir reikšmės pateks kaip objektas į pirmąjį mūsų komponento funkcijos-konstruktoriaus parametrą Product:

function Product(props) {
	console.log(props); // objektas su raktais name ir cost
	
	return <p>
		product
	</p>;
}

Parametro pavadinimas gali būti bet koks, bet React įprasta jį vadinti props. Tai iš esmės yra ne tik parametro pavadinimas, o svarbi React koncepcija.

Šios koncepcijos esmė tokia: kviečiant komponento žymę, į šią žymę galima įrašyti atributus su duomenimis. Šie duomenys pateks į komponento propsus. Tada komponentas gali naudoti šiuos duomenis, pavyzdžiui, reikalingai išdėstymui sukurti.

Padarykime tai:

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

Patogiau ir labiau priimtina naudoti ne objektą props, o iškart atlikti destruktūrizavimą propsų tiesiai funkcijos parametruose:

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

Sukurkite komponentą Employee, kuris atvaizduoja darbuotojo duomenis ekrane. Tegul šiais duomenimis būna pavardė, vardas, patronimas ir atlyginimas. Suformatuokite šiuos duomenis jums reikalingoje išdėstyme. Atvaizduokite komponente App tris darbuotojus su skirtingais duomenimis.