Komponent-props i React

I forrige leksjon viste vi flere instanser av produkter:

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

Foreløpig viser hver kall på produkt-taggen det samme på skjermen. La oss nå gjøre hvert produkt unikt.

La oss si at hvert produkt for eksempel skal ha et navn og en pris. La oss sørge for at hvert kall på produkt-taggen viser et produkt med sitt eget navn og pris, formatert i ønsket HTML-struktur.

For å oppnå dette må vi gjennomføre flere trinn.

Til å begynne med, når vi kaller produkt-taggen, skriver vi to attributter i denne taggen: attributten name med produktets navn og attributten cost med prisen, slik:

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

Navnene og verdiene til disse attributtene vil komme inn som et objekt i den første parameteren til funksjonskonstruktøren for vår Product-komponent:

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

Parameternavnet kan være hva som helst, men i React er det vanlig å kalle det props. Dette er faktisk ikke bare et parameternavn, men et viktig konsept i React.

Essensen av dette konseptet er som følger: når du kaller en komponent-tagg, kan du skrive attributter med data i denne taggen. Disse dataene vil komme inn i komponentens props. Deretter kan komponenten bruke disse dataene, for eksempel for å opprette ønsket HTML-struktur.

La oss gjøre dette:

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

Det er mer praktisk og mer vanlig å ikke bruke props-objektet direkte, men umiddelbart utføre destrukturering av props direkte i funksjonsparameterne:

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