Nosacītā renderēšanas piemērošana…

Kā jau Jūs noteikti zināt, tad “Steits” ir visi dati, ar kuriem pašlaik strādā jūsu lietotne. Paturot to prātā, varat izlemt nosacīti renderēt konkrētus komponentus savā lietotnē, pamatojoties uz to, vai konkrētiem stāvokļa datiem ir noteiktas vērtības. Lai tas būtu iespējams, React darbojas ar viegli pieejamo JavaScript sintaksi un jēdzieniem.

Apsveriet minimālistisku produktivitātes lietotni.

Programma ņem klienta datora pašreizējo datumu un laiku un, pamatojoties uz datiem, ekrānā parāda vienu no diviem ziņojumiem:

Darba dienām ziņojums ir šāds: “Tev viss izdosies!”
Nedēļas nogalēs ziņa ir: “Atpūties”

Ir daži veidi, kā to panākt, izmantojot React.

Viena pieeja ietver komponenta iestatīšanu katram iespējamajam ziņojumam, kas nozīmē, ka jums ir divi komponenti. Nosauksim tās par “Workdays” un “Weekends”.

Pēc tam jums būtu trešais komponents “CurrentMessage”, kas atveidotu atbilstošo komponentu, pamatojoties uz vērtību, kas atgriezta no funkcijas “getDay()” izsaukuma.

Šeit ir vienkāršots CurrentMessage komponenta kods:

function CurrentMessage() {
    const day = new Date().getDay();
    if (day >= 1 && day <= 5) {
        return <Workdays />
    }
    return <Weekends />
}

Tā vietā, lai tos aprēķinātu tieši, varat izmantot dažus vēsturiskos datus un, iespējams, iegūt šos datus no lietotāja, izmantojot ievadi, no vecākkomponenta.

Tādā gadījumā komponents CurrentMessage varētu izskatīties šādi:

function CurrentMessage(props) {
    if (props.day >= 1 && props.day <= 5) {
        return <Workdays />
    }
    return <Weekends />
}

Nosacītā renderēšana ar elementu mainīgo palīdzību…

Lai vēl vairāk uzlabotu CurrentMessage komponentu, iespējams, vēlēsities izmantot elementu mainīgos. Tas ir noderīgi dažos gadījumos, kad vēlaties racionalizēt renderēšanas kodu — tas ir, ja vēlaties atdalīt nosacījumu loģiku no koda, lai renderētu lietotāja interfeisu.

Šeit ir piemērs, kā to izdarīt ar CurrentMessage komponentu:

function CurrentMessage({day}) {
    const weekday = (day >= 1 && day <= 5);
    const weekend = (day >= 6 && day <= 7);
    let message;


    if (weekday) {
        message = <Workdays />
    } else if (weekend) {
        message = <Weekends />
    } else {
        message = <ErrorComponent />
    }


    return (
        <div>
            {message}
        </div>
    )
}

CurrentMessage komponenta izvade būs atkarīga no tā, kāda ir saņemtā dienas mainīgā vērtība. Ja dienas mainīgajam ir jebkura skaitļa vērtība no 1 līdz 5 (ieskaitot), izvade būs komponenta Darba dienas saturs. Pretējā gadījumā, ja dienas mainīgā vērtība ir 6 vai 7, izvade būs nedēļas nogales komponenta saturs.

Nosacījuma renderēšana, izmantojot loģisko operatoru “AND”

Vēl viena interesanta pieeja nosacījuma renderēšanai ir loģiskā “AND” operatora && izmantošana.

Tālāk ir norādīts, kā operators && tiek izmantots, lai panāktu nosacījumu renderēšanu:

function LogicalAndExample() {
    const val = prompt('Jebkas izņemot 0')
    return (
        <div>
            <h1>Lūdzu neievadiet lauciņā nulli</h1>
            {val &&
                <h2>Brīnišķīgi! Nulle netika ievadīta!</h2>
            }
        </div>
    )
}

Šeit ir jāizskaidro dažas lietas, tāpēc šeit ir “logicalAndExample” komponenta skaidrojums no augšas uz leju:

Pirmkārt, jūs lūdzat lietotājam rakstīt uzvednē, norādot, ka jums ir nepieciešams kaut kas cits, izņemot nulles rakstzīmi; un jūs saglabājat ievadi “val“ vērtībā.

“return” priekšrakstā “h1” virsraksts ir ietīts elementā “div”, un pēc tam tiek izmantotas figūriekavas, lai iekļautu JSX izteiksmi. Šajā JSX izteiksmē ir viens && operators, kuru ieskauj kāds kods gan kreisajā, gan labajā pusē; kreisajā pusē ir norādīta “val” vērtība, bet labajā pusē ir JSX.

Lai saprastu, kas tiks izvadīts ekrānā, apsveriet šādu standarta JavaScript piemēru:

true && console.log('Šis tiks parādīts ekrānā')

Ja palaidāt šo komandu, izvade būs tikai false Būlean vērtība.

Citiem vārdiem sakot, ja rekvizīts tiek novērtēts kā patiess, izmantojot && operatoru, pa labi no && operatora varat renderēt jebkurus JSX elementus, ko vēlaties.

Nosacītie komponenti…

Vai esat kādreiz apmeklējis vietni, kurai bija nepieciešams lietotāja konts?

Piemēram: Lai pieteiktos, jānoklikšķina uz pogas “Pieteikties”, un, kad esat pieteicies, poga “Pieteikties” tiek mainīta uz pogu “Iziet”.

Tas bieži tiek darīts, izmantojot kaut ko, ko sauc par nosacījumu renderēšanu.

Iepriekšējos rakstos jūs jau uzzinājāt par vienkāršiem nosacījumiem, izmantojot if un switch paziņojumus.

Izmantojot šos paziņojumus, varat mainīt koda uzvedību, pamatojoties uz noteiktiem nosacījumiem.

Piemēram, varat iestatīt mainīgo uz citu vērtību, pamatojoties uz stāvokļa pārbaudes rezultātu.

let name; 
if (Math.random() > 0.5) { 
    name = "Mārtiņš" 
} else { 
    name = "Tomass" 
}

let name; 
let newUser = true; 
if (Math.random() > 0.5 && newUser) { 
    name = "Mārtiņš" 
} else { 
    name = "Tomass" 
}

Nosacītā renderēšana ir veidota pēc tāda paša principa. Izmantojot nosacījumus, varat atgriezt dažādus bērnu komponentus. Tas bieži tiek darīts, izmantojot rekvizītus, kas tiek nodoti pamatkomponentam, taču to var izdarīt arī, pamatojoties uz komponenta stāvokli.

Apskatīsim vienkāršu piemēru.

Pieņemsim, ka jums ir divi pakārtotie komponenti, ko sauc par LoginButton un LogoutButton; katrs parāda savu atbilstošo pogu.

Vecākā komponentā ar nosaukumu LogInOutButton varat pārbaudīt pamatkomponentā nodotos rekvizītus un atgriezt citu pakārtoto komponentu, pamatojoties uz rekvizītu vērtību.

Šajā piemērā rekvizīti satur rekvizītu ar nosaukumu isLoggedIn. Ja tas ir iestatīts uz true, tiek atgriezts komponents LogoutButton. Pretējā gadījumā tiek atgriezts LoginButton komponents.

function LogInOutButton(props) {
const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <LogoutButton />;
  } else {
  return <LoginButton />;
}

Pēc tam, kad tiek izmantots LogInOutButton vecākkomponents, rekvizītu var nodot.



<LogInOutButton isLoggedIn={false} />

Šis ir vienkāršs piemērs, kas parāda, kā varat mainīt to, kas tiek parādīts, pamatojoties uz stāvokļa pārbaudi. Jūs to bieži izmantosiet, izstrādājot React lietojumprogrammas.

Noderīgs raksts? Dalies ar citiem:

Dalīties:

Nosacītā renderēšanas piemērošana…