Komponentprops i React

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

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

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