Komponente se props in React

In die vorige les het ons verskeie instansies van produkte vertoon:

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

Tans vertoon elke aanroep van die produk-tag dieselfde ding op die skerm. Laat ons nou elke produk uniek maak.

Laat ons byvoorbeeld sê elke produk moet 'n naam en 'n prys hê. Laat ons maak dat elke aanroep van die produk-tag 'n produk vertoon met sy eie naam en prys, geformateer in die gewenste opmaak.

Om dit te doen, moet ons 'n paar stappe volg.

Eerstens, wanneer ons die produk-tag aanroep, sal ons twee attribute in hierdie tag skryf: 'n attribuut name met die produknaam en 'n attribuut cost met die prys, soos volg:

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

Die name en waardes van hierdie attribute sal as 'n objek in die eerste parameter van ons komponent se funksie-konstruktor Product beland:

function Product(props) {
	console.log(props); // objek met sleutels name en cost
	
	return <p>
		product
	</p>;
}

Die parameter se naam kan enigiets wees, maar in React is dit aanvaar om dit props te noem. Dit is eintlik nie net 'n parameternaam nie, maar 'n belangrike konsep in React.

Die essensie van hierdie konsep is as volg: wanneer 'n komponent se tag aangeroep word, kan atribuute met data in hierdie tag geskryf word. Hierdie data sal in die komponent se props beland. Die komponent kan dan hierdie data gebruik, byvoorbeeld, om die benodigde opmaak te skep.

Laat ons dit doen:

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

Dit is meer gerieflik en meer aanvaar om nie die objek props te gebruik nie, maar om onmiddellik destrukturerring van die props direk in die funksie se parameters uit te voer:

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

Maak 'n komponent Employee wat 'n werknemer se data op die skerm vertoon. Laat hierdie data van, naam, patronim en salaris wees. Formateer hierdie data in die opmaak wat jy verkies. Vertoon drie werknemers met verskillende data in die komponent App.