Iegultās “embeded” JSX izteiksmes

Atcerieties, ka JSX ir JavaScript sintakses paplašinājums, kas tiek izmantots kopā ar React. Tas ļauj izstrādātājiem rakstīt HTML kā daļu no sava komponenta koda, un to bieži izmanto programmā React, jo tas nodrošina lielāku elastību.

Šajā rakstā jūs uzzināsiet, kā tiek izmantots JSX un kā izmantot tā galveno funkciju iegultās izteiksmes, jeb embeded expressions.

Vispirms apskatīsim JSX piemēru, kas tīmekļa lapā izvadīs tekstu.

const result = <p>Sveika, pasaule!</p>;

Kods sastāv no rindkopas, jeb paragrāfa, HTML elementiem, kas satur frāzi Sveika pasaule. Tas tiek piešķirts pastāvīgajam mainīgajam ar nosaukumu Result. Ņemiet vērā, ka tad, kad šis JSX kods tiek izpildīts, rezultāta mainīgais saturēs reaģēšanas elementu, ko pēc tam var ievietot tīmekļa lapā.

Šī ir viena no galvenajām JSX iezīmēm.

HTML –> JSX –> REACT

Automātiski izveidojot React elementus no HTML koda.

Izpētīsim vēl vienu svarīgu JSX iezīmi, kas ir iegultās izteiksmes. Iegultās izteiksmes ļauj izstrādātājiem ievietot JavaScript mainīgo vērtības iegūto React elementu HTML. Iegultās izteiksmes var iegult arī funkciju izvades. Pieņemsim, ka jums ir jāievada personas vārds noteiktā formātā. Lai to izdarītu, vispirms varat izveidot funkciju ar nosaukumu formāta nosaukums, kas atgriezīs vārdu un uzvārdu ar atstarpi starp tiem.

function formatName(klientaVārds, uzvārds) {
    return klientaVārds + ' ' + uzvārds
}

Pēc tam savā JSX varat izsaukt šo funkciju figūriekavās.

const result = <p>{ formatName("Jānis", "Kalniņš")}</p>;

Tāpat kā iepriekšējā piemērā, vērtība, ko funkcija ģenerē JavaScript mainīgajam, tiks izvadīta HTML formātā. Izteiksmes var izmantot arī HTML atribūtiem. Tas ir noderīgi, ja nepieciešams ievietot personas profila attēla adresi. Lai to izdarītu, vispirms ir jāsaglabā profila attēla adrese mainīgā URL.

const url = "bilde.png";

Attēls tiks parādīts, izmantojot img elementus, tāpēc URL mainīgais ir jāievieto src atribūtos.

const result = <img src={url}></img>;

Ņemiet vērā, ka atribūta vērtībai nav nepieciešamas dubultpēdiņas, jo JSX tās automātiski pievienos.

Šis ir tikai viens piemērs tam, kā JSX ir efektīvs veids, kā izvadīt HTML elementus, kas satur JavaScript mainīgo saturu, un, progresējot, jūs saskarsieties ar vairāk. Šajā videoklipā jūs izpētījāt vairākus JSX piemērus, tostarp tādu, kurā tiek izmantotas iegultās izteiksmes, lai React elementā HTML ievietotu JavaScript mainīgo vērtības.