Kupitisha Props kwa Component

Props zinazofahamika

Props ni taarifa unazopitisha kwa tagi ya JSX. Kwa mfano, className, src, alt, width, na height ni baadhi ya props unazoweza kupitisha kwa <img>:

Props unazoweza kupitisha kwa tagi ya <img> zimebainishwa mapema (ReactDOM inafuata kiwango cha HTML). Lakini unaweza kupitisha props zozote kwa components zako mwenyewe, kama vile <Avatar>, ili kuzibinafsisha. Hivi ndivyo unavyofanya!

Kupitisha props kwa component

Katika msimbo huu, component ya Profile haipitishi props zozote kwa component yake ya mtoto, Avatar:

export default function Profile() {
  return (
    <Avatar />
  );
}

Unaweza kuipa Avatar props fulani kwa hatua mbili.

Hatua ya 1: Pitisha props kwa component-mtoto

Kwanza, pitisha props fulani kwa Avatar. Kwa mfano, hebu tupitishe props mbili: person (object), na size (namba):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Sasa unaweza kusoma props hizi ndani ya component ya Avatar.

Hatua ya 2: Soma props ndani ya component-mtoto

Unaweza kusoma props hizi kwa kuorodhesha majina yao person, size yakitenganishwa na koma ndani ya ({ na }) mara tu baada ya function Avatar. Hili hukuruhusu kuzitumia ndani ya msimbo wa Avatar, kama ambavyo ungefanya na kigezo.

function Avatar({ person, size }) {
  // person na size zinapatikana hapa
}

Ongeza mantiki fulani kwa Avatar inayotumia props za person na size kwa ku-render, nawe umemaliza.

Sasa unaweza kusanidi Avatar ili i-render kwa njia nyingi tofauti kwa props tofauti. Jaribu kubadilisha thamani!

Props hukuruhusu kufikiria kuhusu components za mzazi na mtoto kwa kujitegemea. Kwa mfano, unaweza kubadilisha props za person au size ndani ya Profile bila kulazimika kufikiria jinsi Avatar inavyozitumia. Vivyo hivyo, unaweza kubadilisha jinsi Avatar inavyotumia props hizi, bila kuangalia Profile.

Unaweza kufikiria props kama “vifundo” (knobs) unavyoweza kurekebisha. Hutimiza jukumu lilelile ambalo hoja (arguments) hutimiza kwa functions—kwa hakika, props ndicho pekee kilicho hoja kwa component yako! Functions za components za React hukubali hoja moja tu, object ya props:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Kwa kawaida hauhitaji object nzima ya props yenyewe, hivyo unaipasua (destructure) kuwa props mahususi.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Kubainisha thamani chaguo-msingi kwa prop

Kama unataka kuipa prop thamani chaguo-msingi ya kurejea pale ambapo hakuna thamani iliyobainishwa, unaweza kufanya hivyo kwa destructuring kwa kuweka = na thamani chaguo-msingi mara tu baada ya kigezo:

function Avatar({ person, size = 100 }) {
  // ...
}

Sasa, kama <Avatar person={...} /> ita-render bila prop ya size, size itawekwa kuwa 100.

Thamani chaguo-msingi hutumika tu kama prop ya size haipo au kama unapitisha size={undefined}. Lakini kama unapitisha size={null} au size={0}, thamani chaguo-msingi haitatumika.

Kupeleka props kwa sintaksia ya JSX spread

Wakati mwingine, kupitisha props kunakuwa na marudio mengi sana:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

Hakuna ubaya wowote kwa msimbo wenye marudio—unaweza kuwa unaosomeka zaidi. Lakini wakati mwingine unaweza kuthamini ufupi. Baadhi ya components hupeleka props zao zote kwa watoto wao, kama ambavyo Profile hii inavyofanya na Avatar. Kwa sababu hazitumii yoyote kati ya props zao moja kwa moja, inaweza kuwa na maana kutumia sintaksia fupi zaidi ya “spread”:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Hili hupeleka props zote za Profile kwa Avatar bila kuorodhesha kila jina lao.

Tumia sintaksia ya spread kwa kiasi. Kama unaitumia kwenye kila component nyingine, kuna kitu hakiko sawa. Mara nyingi, hili huashiria kuwa unapaswa kugawanya components zako na kupitisha children kama JSX. Zaidi kuhusu hilo baadaye!

Kupitisha JSX kama children

Ni jambo la kawaida kupachika tagi za kivinjari zilizojengwa ndani:

<div>
  <img />
</div>

Wakati mwingine utataka kupachika components zako mwenyewe kwa njia ileile:

<Card>
  <Avatar />
</Card>

Unapopachika maudhui ndani ya tagi ya JSX, component-mzazi itapokea maudhui hayo katika prop iitwayo children. Kwa mfano, component ya Card iliyo hapa chini itapokea prop ya children iliyowekwa kuwa <Avatar /> na kui-render ndani ya div ya kufunika:

Jaribu kubadilisha <Avatar> iliyo ndani ya <Card> na maandishi fulani ili kuona jinsi component ya Card inavyoweza kufunika maudhui yoyote yaliyopachikwa. Haihitaji “kujua” kile kinachо-render ndani yake. Utaona mpangilio huu unaonyumbulika katika sehemu nyingi.

Unaweza kufikiria component yenye prop ya children kama iliyo na “shimo” linaloweza “kujazwa” na components zake za mzazi kwa JSX yoyote. Mara nyingi utatumia prop ya children kwa vifuniko vya kuonekana: paneli, gridi, n.k.

Jinsi props zinavyobadilika baada ya muda

Component ya Clock iliyo hapa chini hupokea props mbili kutoka kwa component yake ya mzazi: color na time. (Msimbo wa component-mzazi umeachwa kwa sababu unatumia state (hali), ambayo hatutaingia ndani yake bado.)

Jaribu kubadilisha rangi kwenye sanduku la kuchagua lililo hapa chini:

Mfano huu unaonyesha kuwa component inaweza kupokea props tofauti baada ya muda. Props si tuli kila wakati! Hapa, prop ya time hubadilika kila sekunde, na prop ya color hubadilika unapochagua rangi nyingine. Props huakisi data ya component wakati wowote, badala ya mwanzoni tu.

Hata hivyo, props ni immutable—neno kutoka sayansi ya kompyuta linalomaanisha “isiyoweza kubadilika”. Wakati component inahitaji kubadilisha props zake (kwa mfano, kama jibu kwa mwingiliano wa mtumiaji au data mpya), itabidi “iiombe” component yake ya mzazi ipitishe props tofauti—object mpya! Props zake za zamani kisha zitatupwa kando, na hatimaye injini ya JavaScript itarudisha kumbukumbu iliyochukuliwa nazo.

Usijaribu “kubadilisha props”. Unapohitaji kujibu mwingiliano wa mtumiaji (kama kubadilisha rangi iliyochaguliwa), utahitaji “set state”, ambayo unaweza kujifunza kuihusu katika State: Kumbukumbu ya Component.