React Trīskāršie operatori un funkcijas JSX

Tātad jūs esat izpētījis vairākus veidus, kā definēt komponentus programmā React; tas ietver funkciju deklarācijas, funkciju izteiksmes un bultiņu funkcijas.

Turpinot pilnveidot savas zināšanas par React sintaksi, jūs iemācīsities vairāk izmantot JSX un iegultās JSX izteiksmes.

Šajā rakstā jūs iepazīsities ar trīskāršu izteiksmju izmantošanu, lai iegūtu nejaušu atdevi, kā arī to, kā izsaukt funkcijas JSX izteiksmēs.

Cits veids, kā rakstīt if…else nosacījums

Jūs, iespējams, esat iepazinies ar if…else nosacījuma struktūru. Šeit ir ātrs atsvaidzinājums:

let name = 'Bruno';
if (name == 'Bruno') {
    console.log('Sveiks, Bruno');
} else {
    console.log('Sveiks, Draugs');
};

Iepriekš minētais kods darbojas šādi:

  1. Pirmkārt, es paziņoju nosaukuma mainīgo un iestatu to uz virkni “Bruno”.
  2. Pēc tam es izmantoju paziņojumu if, lai pārbaudītu, vai nosaukuma mainīgā vērtība ir “Bruno”. Ja tā ir, es vēlos console.log vārdu “Bruno”.
  3. Pretējā gadījumā, ja nosaukuma mainīgā vērtība nav “Bruno”, tiks izpildīts bloks else un konsolē tiks izvadīti vārdi “Sveiks, draugs“.

Iepriekš es sniedzu piemēru, kā izmantot nosacījumu if…else. Vai zinājāt, ka ir cits, atšķirīgs veids, kā efektīvi darīt to pašu? Tas ir pazīstams kā trīskāršais operators. Trīskāršais operators JavaScript izmanto divas atšķirīgas rakstzīmes:

pirmā ir jautājuma zīme, tas ir, ? simbols.

Pa kreisi no ? simbola, jūs ievietojat nosacījumu, kuru vēlaties pārbaudīt.

Tāpat ,kā iepriekš minētajā if…else paziņojumā, nosacījums, ko es pārbaudu, ir name == ‘Bruno’.

Citiem vārdiem sakot, es lūdzu JavaScript programmu apskatīt vērtību, kas ir saglabāta nosaukuma mainīgajā, un pārbaudīt, vai šī vērtība ir tāda pati kā “Bruno”. Ja tā ir, tad JavaScript programma atgriezīs patieso, jeb True Būlean vērtību. Ja nosaukuma mainīgā vērtība atšķiras no “Bruno”, vērtība, ko atgriež JavaScript programma, būs false Būlean vērtība.

Šeit ir kods, kas atspoguļo iepriekšējā rindkopā sniegto skaidrojumu:

name == 'Bruno' ?

Ņemiet vērā, ka iepriekš minētais kods ir nepilnīgs. Man ir nosacījums, ko es pārbaudu (nosaukums == ‘Bruno’ daļa). Man ir arī ? rakstzīme, tas ir, pirmā no divām rakstzīmēm, kas nepieciešamas, lai izveidotu sintaktiski derīgu trīskāršu operatoru. Tomēr man joprojām ir vajadzīga otrā rakstzīme, kas ir kols, tas ir : simbols. Šī rakstzīme, jeb simbols tiek ievietota aiz jautājuma zīmes. Tagad varu paplašināt savu kodu, iekļaujot arī šo:

name == 'Bob' ? :
Tādējādi es esmu soli tuvāk trīskāršā operatora pabeigšanai. Lai gan esmu pievienojis trīskāršā operatora izveidošanai nepieciešamās rakstzīmes, man joprojām ir jāpievieno atgriešanas vērtības. Citiem vārdiem sakot, ja name == ‘Bruno’ ir novērtēts kā patiess, es gribu atgriezt vārdus “Jā, tas ir Bruno!”. Pretējā gadījumā es gribu atgriezt vārdus “Es nepazīstu šo cilvēku”.
name == Bruno ? "Jā, tas ir Bruno!" : "Es nepazīstu šo cilvēku";
Būtībā šādi darbojas trīskāršais operators. Tā ir tikai saīsināta sintakse, ko varu izmantot kā priekšraksta if aizstājēju. Lai pierādītu, ka tas tiešām tā ir, šeit ir mans sākuma if…else piemērs, kas rakstīts kā trīskāršs operators:
let name = 'Bruno';
name == 'Bruno' ? console.log('Sveiks, Bruno') : console.log('Sveiks, Draugs');

Trīskāršu izteiksmju izmantošana JSX

Apskatīsim piemēru komponentam, kas izmanto trīskāršu izteiksmi, lai nejauši mainītu parādīto tekstu.

function Piemērs() {
return (
<div className="virsraksts">
<h1>{Math.random() >= 0,5? "Virs 0,5" : "Mazāk par 0,5"}</h1>
</div>
);
};

Elementā <h1> figūriekavas signalizē React, ka vēlaties parsēt iekšā esošo kodu kā parastu JavaScript.

Pēc tam figūriekavām varat pievienot trīskāršu paziņojumu. Katrs trīskāršais paziņojums konceptuāli, kas izteikts pseidokodā, darbojas šādi:

comparison ? true : false

Faktiskajā koda piemērā šīs nodarbības vienuma sākumā salīdzināšanas daļa, kas atrodas pa kreisi no jautājuma zīmes, izmanto >= (lielāks par vai vienāds ar operatoru), lai atgrieztu Būlean vērtību. . Ja salīdzināšanas rezultāts tiek novērtēts kā patiess, tiek atgriezta virkne “Virs 0,5”. Citiem vārdiem sakot, viss, kas atrodas starp jautājuma zīmi un semikola rakstzīmi, tiks atgriezts. Pretējā gadījumā, ja salīdzināšanas rezultāts tiek novērtēts kā nepatiess, tiek atgriezta virkne “Mazāk par 0,5”. Citiem vārdiem sakot, vērtība, kas atrodas pa labi no kola rakstzīmes, tiks atgriezta no trīskāršās izteiksmes.

Tādā veidā varat izmantot trīskāršu izteiksmi, lai pārbaudītu nosacījumu tieši komponentā un dinamiski atgrieztu vērtību.

Funkciju izsaukumu izmantošana JSX

Vēl viens veids, kā strādāt ar izteiksmi JSX, ir izsaukt funkciju. Funkcijas izsaukšana ir izteiksme, jo katra izteiksme atgriež vērtību, un funkcijas izsaukšana vienmēr atgriezīs vērtību, pat ja šī atgriešanas vērtība nav definēta.

Tāpat kā iepriekšējā piemērā, varat izmantot funkciju izsaukšanu iekš JSX, lai atgrieztu nejaušu skaitli:

funkcija Piemērs2() {
    return (
        <div className="virsraksts">
            <h1>Šeit ir nejaušs skaitlis no 0 līdz 10:
                {Math.floor(Math.random() * 10) + 1}
            </h1>
        </div>
    );
};

Komponentā Piemērs2 tiek izmantotas iebūvētās Math.floor() un Math.random() metodes, kā arī dažas skaitļu vērtības un aritmētiskie operatori, lai parādītu nejaušu skaitli no 0 līdz 10.

Varat arī iegūt šo funkcionalitāti atsevišķā funkcijā:

funkcija Piemērs3() {
    const saņemNejaušuSkaitli = () => Math.floor(Math.random() * 10) + 1


    return(
        <div className="virsraksts">
            <h1>Šeit ir nejaušs skaitlis no 0 līdz 10: {getRandomNum()}</h1>
        </div>
    );
};

Funkciju saņemNejaušuSkaitli() var rakstīt arī kā funkcijas deklarāciju vai funkcijas izteiksmi. Tai nav jābūt bultiņas funkcijai.

Bet ievērosim abas alternatīvas: funkcijas izteiksmi un funkcijas deklarāciju.

Funkcijas izteiksme:

const saņemNejaušuSkaitli = function() {
    return Math.floor(Math.random() * 10) + 1
} ;
Funkcijas deklarācija:

function saņemNejaušuSkaitli() {
    return Math.floor(Math.random() *10) + 1
};

Protams, ir daudz citu piemēru. Šeit lietotie ir paredzēti, lai palīdzētu jums saprast, cik daudzpusīga un nevainojama ir JSX sintakse. Uzlabojot savas React prasmes, jūs atradīsiet daudz radošu veidu, kā izmantot JavaScript izteiksmes JSX.

Tagad, kad esat pabeidzis šo lasīšanu, esat uzzinājis par vēl dažiem veidiem, kā varat izmantot izteiksmes JSX.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: