Reactда компонентларнинг пропслари

Олдинги дарслиқда биз бир неча маҳсулот инстантларини чиқардик:

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

Ҳозирча ҳар бир маҳсулот теги чақириғи экранда бир хил нарсани чиқармоқда. Келингиз энди ҳар бир маҳсулотни ўзига хос қилайлик.

Масалан, ҳар бир маҳсулот ном ва нархга эга бўлсин. Келингиз, ҳар бир маҳсулот теги чақириғи ўзига тегишли ном ва нархга эга бўлган маҳсулотни чиқарсин, биз хохлаган версткада тартибга солинсин.

Бунинг учун бизга бир неча қадамларни бажариш зарур.

Бошлаш учун, маҳсулот тегини чақирганда, биз ушбу тегга икки атрибут ёзамиз: маҳсулот номи учун name атрибути ва нархи учун cost атрибути, мана бу қандай:

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

Ушбу атрибутларнинг номлари ва қийматлари бизнинг Product компонентимизнинг функция-конструкторининг биринчи параметрига объект кўринишида түшади:

jsxfunction Product(props) {
  console.log(props); // name ва cost калитларига эга объект
  
  return <p>
    product
  </p>;
}

Параметр номи ихтиёрий бўлиши мумкин, лекин React да унии props деб аташ оддий хол. Аслода бу фақат параметр номи эмас, балки React нинг мухим концепциясидир.

Ушбу концепциянинг мўҳимаги шундаки: компонент тегини чақирганда ушбу тегга маълумотлар билан атрибутлар ёзиш мумкин. Бу маълумотлар компонентнинг пропслари га түшади. Сўнгра компонент бу маълумотлардан фойдаланиши мумкин, масалан, керакли версткани яратиш учун.

Келингиз буни амалга оширамиз:

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

Илдирокли ва оддийроқ усул - props объектидан фойдаланмаслик, балки дастурда функция параметрларида деструктуризација ни бажариш:

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