Lastnosti komponent v React

V prejšnji lekciji smo prikazali več primerkov izdelkov:

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

Za zdaj vsak klic oznake z izdelkom prikaže na zaslonu isto vsebino. Naj naredimo vsak izdelek edinstven.

Recimo, da mora imeti vsak izdelek ime in ceno. Naredimo tako, da vsak klic oznake z izdelkom prikaže izdelek z lastnim imenom in ceno, oblikovano v želeno postavitev.

Za to moramo narediti več korakov.

Za začetek bomo ob klicu oznake z izdelkom v to oznako zapisali dva atributa: atribut name z imenom izdelka in atribut cost s ceno, takole:

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

Imena in vrednosti teh atributov bodo prišle v obliki objekta v prvi parameter funkcije-konstruktorja naše komponente Product:

function Product(props) {
	console.log(props); // objekt s ključema name in cost
	
	return <p>
		product
	</p>;
}

Ime parametra je lahko poljubno, vendar je v Reactu običajno, da ga imenujemo props. Pravzaprav to ni le ime parametra, ampak pomemben koncept Reacta.

Bistvo tega koncepta je naslednje: ob klicu oznake komponente lahko v to oznako zapišemo atribute s podatki. Ti podatki bodo prišli v lastnosti komponente. Nato lahko komponenta uporabi te podatke, na primer, za ustvarjanje želene postavitve.

Naredimo to:

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

Bolj priročno in bolj sprejeto je, da ne uporabljamo objekta props, ampak takoj izvedemo destrukturiranje lastnosti direktno v parametrih funkcije:

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

Naredite komponento Employee, ki prikaže podatke zaposlenega na zaslon. Naj bodo ti podatki priimek, ime, srednje ime in plača. Oblikujte te podatke v želeno postavitev. Prikažite v komponenti App tri zaposlene z različnimi podatki.