Props — Qeybinta Xogta

Haddii qaybaha (components) React ay yihiin functions, markaas props waa xujooyin aad u dirtid. Waa sida aad u dejin karto qaybta — mid walba samayn kartaa wax ka duwan iyadoo ku xidnaanaysa props-ka ay hesho.

Sida Props u Shaqeeyaan

// Waxaan u dirtaa props
<Salaan magac="Axmed" xirfad="Frontend Developer" />

// Qaybtu sidaas waxay u qaataa
function Salaan({ magac, xirfad }) {
  return (
    <div>
      <h2>{magac}</h2>
      <p>{xirfad}</p>
    </div>
  );
}

Calaamadda { } oo ku jirta dooda function-ka waxay la micno tahay destructuring — JSON-ka si toos ah ayaa loogu xidaa magacyada.

Noocyada Props-ka

Props waxay noqon kartaa nooc kasta ee JavaScript:

<Xaalad
  magac="Fadumo"           // xariiq (string)
  da={29}                  // tiro (number)
  firfircoon={true}        // boolean
  xirfadaha={['React', 'CSS', 'TypeScript']}  // array
  ciwaanka={{ magaalo: 'Muqdisho', dalka: 'Soomaaliya' }}  // shay (object)
  marka la gujiyaa={() => xog('gujiyo!')}  // function
/>

Xusuusnow: Xariiqyada oo keliya ayaa la gudbin karaa " " — waxyaabaha kale oo dhan waxay u baahan yihiin { }.

Qiyamka Default

Haddii prop la’aan la diro, waxaad dejin kartaa qiyamka caadiga ah (default values):

function Badhanka({ qoraal = "Guji", midab = "cagaar", baaxad = "dhexe" }) {
  return (
    <button className={`btn btn-${midab} btn-${baaxad}`}>
      {qoraal}
    </button>
  );
}

// Waxaa isticmaali kartaa sidan:
<Badhanka />                          // "Guji", cagaar, dhexe
<Badhanka qoraal="Soo dir" />        // "Soo dir", cagaar, dhexe
<Badhanka midab="buluug" baaxad="weyn" qoraal="Xidid" />

children Props

Prop gaar ah oo loo yaqaan children ayaa lagu heli karaa marka aad nuxurka u dhex geliso tag-ga qaybta:

function Kaardhka({ children, cinwaan }) {
  return (
    <div className="kaardhka">
      <h3 className="cinwaan">{cinwaan}</h3>
      <div className="jirka">{children}</div>
    </div>
  );
}

// Isticmaal:
<Kaardhka cinwaan="Macluumaadka Shaqada">
  <p>Waxaan ahay horumariye frontend ah.</p>
  <p>Waxaan ka shaqeynayaa Muqdisho.</p>
</Kaardhka>

Props Akhri Keliya

Props waa akhri keliya — qaybta soo qaadatay kuma beddeli karto props-keeda. Hadii qiimaha isbeddelo, taas waxay u baahan tahay state (casharka xiga).

function Tiro({ qiimaha }) {
  // ❌ Tan sameeya kama ayaan awoodi: qiimaha = qiimaha + 1;
  // ✅ Taas waxay u baahan tahay useState
  return <span>{qiimaha}</span>;
}