Komponens props-ok a React-ben

Az előző leckében több termékpéldányt jelenítettünk meg:

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

Egyelőre minden termékcímke hívás ugyanazt jeleníti meg a képernyőn. Tegyük most egyedivé az egyes termékeket.

Tegyük fel például, hogy minden terméknek legyen neve és ára. Úgy fogjuk beállítani, hogy minden termékcímke hívás egy adott névvel és árral rendelkező terméket jelenítsen meg, a számunkra megfelelő formázásban.

Ehhez több lépést kell megtennünk.

Először is, a termékcímke hívásakor ebbe a címkébe két attribútumot írunk: a name attribútumot a termék nevével és az cost attribútumot az árral, így:

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

Ezen attribútumok nevei és értékei egy objektum formájában kerülnek a Product komponensünk konstruktor függvényének első paraméterébe:

jsxfunction Product(props) {
  console.log(props); // name és cost kulcsokkal rendelkező objektum
  
  return <p>
    product
  </p>;
}

A paraméter neve tetszőleges lehet, de a React-ban szokás props-nak nevezni. Ez valójában nem csupán egy paraméter neve, hanem egy fontos React koncepció.

Ennek a koncepciónak a lényege a következő: a komponens címke hívásakor ebbe a címkébe adattartalmú attribútumokat írhatunk. Ezek az adatok a komponens props-aiba kerülnek. Ezután a komponens felhasználhatja ezeket az adatokat, például a kívánt formázás létrehozásához.

Tegyük ezt meg:

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

Kényelmesebb és elfogadottabb nem az props objektumot használni, hanem egyből végrehajtani a destruktúrálást a props-okon közvetlenül a függvény paraméterein belül:

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