Lastnosti komponent v React

V prejšnji lekciji smo prikazali več primerkov izdelkov:

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

Za zdaj vsak klic oznake z izdelkom prikaže na zaslonu isto vsebino. Naj naredimo vsak izdelek edinstven.

Recimo, da mora imeti vsak izdelek ime in ceno. Naredimo tako, da vsak klic oznake z izdelkom prikaže izdelek z lastnim imenom in ceno, oblikovano v želeno postavitev.

Za to moramo narediti več korakov.

Za začetek bomo ob klicu oznake z izdelkom v to oznako zapisali dva atributa: atribut name z imenom izdelka in atribut cost s ceno, takole:

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

Imena in vrednosti teh atributov bodo prišle v obliki objekta v prvi parameter funkcije-konstruktorja naše komponente Product:

jsxfunction Product(props) {
  console.log(props); // objekt s ključema name in cost
  
  return <p>
    product
  </p>;
}

Ime parametra je lahko poljubno, vendar je v Reactu običajno, da ga imenujemo props. Pravzaprav to ni le ime parametra, ampak pomemben koncept Reacta.

Bistvo tega koncepta je naslednje: ob klicu oznake komponente lahko v to oznako zapišemo atribute s podatki. Ti podatki bodo prišli v lastnosti komponente. Nato lahko komponenta uporabi te podatke, na primer, za ustvarjanje želene postavitve.

Naredimo to:

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

Bolj priročno in bolj sprejeto je, da ne uporabljamo objekta props, ampak takoj izvedemo destrukturiranje lastnosti direktno v parametrih funkcije:

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