Komponentprops i React

I den forrige lektion viste vi flere instanser af produkter:

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

Indtil videre viser hvert kald af produkt-tagget det samme på skærmen. Lad os nu gøre hvert produkt unikt.

Lad os for eksempel sige, at hvert produkt skal have et navn og en pris. Lad os sørge for, at hvert kald af produkt-tagget viser et produkt med sit eget navn og pris, formateret i den ønskede HTML-struktur.

For at gøre dette skal vi gennemføre flere trin.

Til at starte med, når vi kalder produkt-tagget, vil vi tilføje to attributter til dette tag: en attribut name med produktets navn og en attribut cost med prisen, sådan her:

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

Navnene og værdierne af disse attributter vil blive sendt som et objekt til den første parameter af vores komponentfunktion Product:

jsxfunction Product(props) {
  console.log(props); // objekt med nøglerne name og cost
  
  return <p>
    product
  </p>;
}

Parameternavnet kan være hvad som helst, men i React er det almindeligt at kalde det props. Dette er faktisk ikke blot et parameternavn, men en vigtig koncept i React.

Essensen af dette koncept er følgende: når man kalder et komponenttag, kan man tilføje attributter med data til dette tag. Disse data vil blive sendt til komponentets props. Derefter kan komponentet bruge disse data, for eksempel til at opbygge den ønskede HTML-struktur.

Lad os gøre dette:

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

Det er mere bekvemt og mere almindeligt ikke at bruge props-objektet direkte, men i stedet umiddelbart at udføre destrukturering af props direkte i funktionens parametre:

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