Komponendi propsid Reactis

Eelmises õppetükis kuvasime mitu toodete eksemplari:

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

Praegu kuvab iga toodete sildi kutsumine ekraanile sama asja. Teeme nüüd iga toode unikaalseks.

Oletame näiteks, et igal tootel peab olema nimi ja hind. Teeme nii, et iga toodete sildi kutsumine kuvaks toote oma nime ja hinnaga, vormindatuna meile vajalikku veebilehe kujundusse.

Selleks peame tegema mitu sammu.

Alustuseks toodete sildi kutsumisel me kirjutame sellesse silti kaks atribuuti: atribuudi name toote nimega ja atribuudi cost hinnaga, niimoodi:

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

Nende atribuutide nimed ja väärtused jõuavad objektina meie komponendi Product konstruktor-funktsiooni esimesse parameetrisse:

function Product(props) {
	console.log(props); // objekt võtmetega name ja cost
	
	return <p>
		product
	</p>;
}

Parameetri nimi võib olla mis tahes, kuid Reactis on tavaks nimetada seda props. Tegelikult ei ole see lihtsalt parameetri nimi, vaid oluline Reacti kontseptsioon.

Selle kontseptsiooni sisu on järgmine: komponendi sildi kutsumisel saab sellesse silti kirjutada andmetega atribuute. Need andmed jõuavad komponendi propsidesse. Seejärel saab komponent neid andmeid kasutada, näiteks vajaliku veebilehe kujunduse loomiseks.

Teeme selle:

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

Mugavam ja tavapärasem on mitte kasutada objekti props, vaid koheselt teha destruktureerimist propsidest otse funktsiooni parameetrites:

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

Tehke komponent Employee, mis kuvab töötaja andmed ekraanile. Olgu nende andmeteks perekonnanimi, eesnimi, isanimi ja palk. Vormindage need andmed teile vajalikku veebilehe kujundusse. Kuvage komponendis App kolm töötajat erinevate andmetega.