Komponentprops i React

I föregående lektion visade vi flera instanser av produkter:

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

För närvaran visar varje anrop av produkt-taggen samma sak på skärmen. Låt oss nu göra varje produkt unik.

Låt oss säga att varje produkt ska ha ett namn och ett pris. Låt oss se till att varje anrop av produkt-taggen visar en produkt med sitt eget namn och pris, formaterade i den HTML-struktur vi vill ha.

För att göra detta måste vi genomföra flera steg.

Först, när vi anropar produkt-taggen, skriver vi två attribut i denna tagg: attributet name med produktens namn och attributet cost med priset, så här:

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

Namnen och värdena för dessa attribut kommer att skickas in som ett objekt i den första parametern för vår komponentkonstruktor-funktion Product:

function Product(props) {
	console.log(props); // objekt med nycklarna name och cost
	
	return <p>
		product
	</p>;
}

Parameterns namn kan vara vilket som helst, men i React är det vanligt att kalla den props. Detta är faktiskt inte bara ett parameternamn, utan ett viktigt koncept i React.

Kärnan i detta koncept är följande: när man anropar en komponent-tagg kan man skriva attribut med data i denna tagg. Denna data kommer att skickas in i komponentens props. Sedan kan komponenten använda denna data, till exempel för att skapa önskad HTML-struktur.

Låt oss göra detta:

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

Det är bekvämare och mer accepterat att inte använda objektet props direkt, utan att omedelbart göra en destrukturering av props direkt i funktionens parametrar:

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

Skapa en komponent Employee som visar en anställds data på skärmen. Låt denna data innehålla efternamn, förnamn, patronymikon (mellannamn) och lön. Formatera denna data i den HTML-struktur du vill ha. Visa tre anställda med olika data i komponenten App.