Ku-render kwa Masharti

Kurudisha JSX kwa masharti

Tuseme una component ya PackingList inayo-render Item kadhaa, ambazo zinaweza kuwekewa alama kuwa zimepakiwa au la:

Angalia kuwa baadhi ya components za Item zina prop yao ya isPacked iliyowekwa kuwa true badala ya false. Unataka kuongeza alama ya kupe (✅) kwenye vitu vilivyopakiwa kama isPacked={true}.

Unaweza kuandika hili kama kauli ya if/else kama hivi:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Kama prop ya isPacked ni true, msimbo huu hurudisha mti tofauti wa JSX. Kwa mabadiliko haya, baadhi ya vitu hupata alama ya kupe mwishoni:

Jaribu kuhariri kinachorudishwa katika kila hali, na uone jinsi matokeo yanavyobadilika!

Angalia jinsi unavyounda mantiki ya matawi kwa kutumia kauli za if na return za JavaScript. Katika React, mtiririko wa udhibiti (kama masharti) hushughulikiwa na JavaScript.

Kurudisha bila kitu kwa masharti kwa kutumia null

Katika baadhi ya hali, hautataka ku-render chochote kabisa. Kwa mfano, tuseme hautaki kuonyesha vitu vilivyopakiwa hata kidogo. Component lazima irudishe kitu fulani. Katika hali hii, unaweza kurudisha null:

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

Kama isPacked ni true, component itarudisha bila kitu, null. Vinginevyo, itarudisha JSX ya ku-render.

Kwa vitendo, kurudisha null kutoka kwa component si jambo la kawaida kwa sababu linaweza kumshangaza mtengenezaji anayejaribu kuii-render. Mara nyingi zaidi, ungejumuisha au kutojumuisha component kwa masharti katika JSX ya component-mzazi. Hivi ndivyo ya kufanya hivyo!

Kujumuisha JSX kwa masharti

Katika mfano uliopita, ulidhibiti ni mti gani wa JSX (kama upo!) ungerudishwa na component. Huenda tayari umeona urudufu fulani katika matokeo ya render:

<li className="item">{name} ✅</li>

unafanana sana na

<li className="item">{name}</li>

Matawi yote mawili ya masharti hurudisha <li className="item">...</li>:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Ingawa urudufu huu si wenye madhara, unaweza kufanya msimbo wako kuwa mgumu zaidi kuutunza. Vipi kama unataka kubadilisha className? Ungelazimika kufanya hivyo katika sehemu mbili za msimbo wako! Katika hali kama hii, ungeweza kujumuisha JSX kidogo kwa masharti ili kufanya msimbo wako uwe DRY zaidi.

Opereta ya masharti (ternary) (? :)

JavaScript ina sintaksia fupi ya kuandika usemi wa masharti — opereta ya masharti au “opereta ya ternary”.

Badala ya hii:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Unaweza kuandika hii:

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

Unaweza kuisoma kama “kama isPacked ni true, basi (?) render name + ' ✅', vinginevyo (:) render name”.

Sasa tuseme unataka kufunga maandishi ya kitu kilichokamilika ndani ya tagi nyingine ya HTML, kama <del> ili kuyakata. Unaweza kuongeza mistari mipya na mabano zaidi ili iwe rahisi kupachika JSX zaidi katika kila hali:

Mtindo huu hufanya kazi vizuri kwa masharti rahisi, lakini utumie kwa kiasi. Kama components zako zinakuwa na msongamano kwa markup nyingi sana ya masharti iliyopachikwa, fikiria kutoa components-watoto ili kusafisha mambo. Katika React, markup ni sehemu ya msimbo wako, hivyo unaweza kutumia zana kama vigezo na functions kuratibu semi zenye utata.

Opereta ya kimantiki ya AND (&&)

Njia mkato nyingine ya kawaida utakayokutana nayo ni opereta ya kimantiki ya AND (&&) ya JavaScript. Ndani ya components za React, mara nyingi hujitokeza wakati unataka ku-render JSX fulani wakati sharti ni true, au render bila kitu vinginevyo. Kwa &&, ungeweza ku-render alama ya kupe kwa masharti tu kama isPacked ni true:

return (
  <li className="item">
    {name} {isPacked && '✅'}
  </li>
);

Unaweza kuisoma kama “kama isPacked, basi (&&) render alama ya kupe, vinginevyo, render bila kitu”.

Hii hapa ikifanya kazi:

Usemi wa && wa JavaScript hurudisha thamani ya upande wake wa kulia (katika hali yetu, alama ya kupe) kama upande wa kushoto (sharti letu) ni true. Lakini kama sharti ni false, usemi mzima unakuwa false. React huchukulia false kama “shimo” katika mti wa JSX, kama tu null au undefined, na hairenderi chochote mahali pake.

Kukabidhi JSX kwa kigezo kwa masharti

Wakati njia mkato zinakwamisha kuandika msimbo wa kawaida, jaribu kutumia kauli ya if na kigezo. Unaweza kukabidhi upya vigezo vilivyofafanuliwa kwa let, hivyo anza kwa kutoa maudhui chaguo-msingi unayotaka kuonyesha, jina:

let itemContent = name;

Tumia kauli ya if kukabidhi upya usemi wa JSX kwa itemContent kama isPacked ni true:

if (isPacked) {
  itemContent = name + " ✅";
}

Mabano ya curly hufungua “dirisha la kuingia JavaScript”. Pachika kigezo kwa mabano ya curly katika mti wa JSX unaorudishwa, ukipachika usemi uliokokotolewa awali ndani ya JSX:

<li className="item">
  {itemContent}
</li>

Mtindo huu ni wenye maneno mengi zaidi, lakini pia ni unaonyumbulika zaidi. Hii hapa ikifanya kazi:

Kama ilivyokuwa awali, hii hufanya kazi si tu kwa maandishi, bali pia kwa JSX yoyote ile:

Kama hufahamu JavaScript vizuri, aina hii mbalimbali ya mitindo inaweza kuonekana kuwa nyingi mno mwanzoni. Hata hivyo, kuzijifunza kutakusaidia kusoma na kuandika msimbo wowote wa JavaScript — na si components za React tu! Chagua ule unaoupendelea kwa kuanzia, kisha rejea kwenye rejeleo hili tena kama utasahau jinsi zile nyingine zinavyofanya kazi.