React-da Komponent Propları

Əvvəlki dərsdə biz bir neçə məhsul nümunəsi çıxartdıq:

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

Hələ ki, hər bir məhsul teqi çağırışı ekranda eynı şeyi göstərir. Gəlin indi hər bir məhsulu unikal edək.

Məsələn, hər bir məhsulun adı və qiyməti olsun. Elə edək ki, hər bir məhsul teqi çağırışı öz adı və qiyməti olan, bizim üçün lazımi görüntüdə hazırlanmış məhsulu göstərsin.

Bunun üçün bir neçə addım atmalıyıq.

Əvvəlcə, məhsul teqini çağırarkən biz bu teqə iki atribut yazacıq: məhsulun adı üçün name atributu və qiyməti üçün cost atributu, belə:

jsxfunction App() {
  return <div>
    <Product name="məhsul1" cost="100" />
    <Product name="məhsul2" cost="200" />
    <Product name="məhsul3" cost="300" />
  </div>;
}

Bu atributların adları və dəyərləri bizim Product komponentimizin funksiya-konstruktorunun ilk parametrinə obyekt şəklində düşəcək:

jsxfunction Product(props) {
  console.log(props); // name və cost açarı olan obyekt
  
  return <p>
    məhsul
  </p>;
}

Parametrin adı istənilən ola bilər, amma React-da onu props adlandırmaq qəbul edilib. Əslində bu, sadəcə parametr adı deyil, Reactın mühüm konsepsiyasıdır.

Bu konsepsiyanın mahiyyəti belədir: komponent teqini çağırarkən bu teqə məlumatlı atributlar yazmaq olar. Bu məlumatlar komponentin proplarına düşəcək. Sonra komponent bu məlumatlardan, məsələn, lazımi görüntünü yaratmaq üçün istifadə edə bilər.

Gəlin bunu edək:

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

Daha rahat və daha qəbul edilən olan, props obyektindən istifadə etməmək, əvəzində funksiyanın parametrlərində birbaşa propların destrukturizasiyasını etməkdir:

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