React komponentleriniň proplary

Öňki sapakda biz birnäçe önüm nusgalaryny görkezdik:

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

Häzirlikçe her bir önüm teginiň çagyrylmagy ekrana şol bir zady görkezýär. Indi her bir önümi üýtgeşik edeliň.

Meselem, her bir önümiň ady we bahasy bolmaly. Şeýle edeliň, her bir önüm teginiň çagyrylmagy öz ady we bahasy bilen, bize gerek görnüşde çykyş edilsin.

Bunun üçin biz birnäçe ädimi ýerine ýetirmeli.

Başlangyçda, önüm tegini çagyrýarka, bu tege iki atribut ýazarys: önümiň ady bilen name atributy we bahasy bilen cost atributy, şeýle:

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

Bu atributlaryň adlary we bahalary biziň Product komponentimiziň funksiýa-konstruktorynyň ilkinji parametrine obýekt görnüşinde düşer:

jsxfunction Product(props) {
  console.log(props); // name we cost açarlary bilen obýekt
  
  return <p>
    product
  </p>;
}

Parametriň ady islendik bolup biler, ýöne React-da ony props diýip atlandyrmak kabul edilendir. Aslynda bu diňe parametriň ady däl, eýsem Reaktyň möhüm düşünjesi.

Bu düşünjäniň mazmuny şondan ybarat: komponent tegini çagyrýarka, bu tege maglumatlar bilen atributlar ýazyp bolýar. Bu maglumatlar komponentiň proplaryna düşer. Soňra komponent bu maglumatlary, meselem, gerek görnüşi döretmek üçin ulanyp biler.

Geliň muny edeliň:

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

Has amatly we has kabul edileni, props obýektini ulamak däl, eýsem derrew destrukturizasiýany funksiýanyň parametrlerinde ýerine ýetirmekdir:

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