Sąlyginis atvaizdavimas reiškia programos elgsenos pakeitimą, atsižvelgiant į jos būseną. Pavyzdžiui, galite pakeisti programos „React“ sveikinimo pranešimą į tamsų naktį. Tokiu būdu, priklausomai nuo paros laiko, rodomas skirtingas pranešimas.

Sąlyginis atvaizdavimas leidžia pateikti skirtingus React komponentus arba elementus, jei įvykdoma sąlyga. Šioje pamokoje sužinosite apie įvairius būdus, kaip galite naudoti sąlyginį atvaizdavimą React.js programose.

Sąlyginio atvaizdavimo įgyvendinimo būdai

Norėdami sekti šiuos pavyzdžius, turite turėti pagrindinį supratimą apie tai, kaip veikia React. Jei šiuo atveju jums sunku, nesijaudinkite – turime naudingų dalykų pradedantiesiems skirtas React.js vadovas.

Sąlyginių teiginių naudojimas

Kaip ir JavaScript, galite naudoti sąlyginius teiginius, pvz., if…else, kad sukurtumėte elementus, kai tenkinamos tam tikros sąlygos.

Pavyzdžiui, galite rodyti nurodytą elementą jeigu blokuoti, kai įvykdoma sąlyga, ir rodyti kitą Kitas blokuoti, jei sąlyga neįvykdyta.

Apsvarstykite šį pavyzdį, kuriame, atsižvelgiant į vartotojo prisijungimo būseną, rodomas prisijungimo arba atsijungimo mygtukas.

function Prietaisų skydelis (rekvizitai) {
 const { isLoggedIn } = rekvizitai
 if (isPrisijungęs){
 grąžinti Atsijungti
 } Kitas{
 grąžinti Prisijungti
 }
}

Ši funkcija pateikia skirtingą mygtuką, priklausomai nuo isPrisijungęs vertė perduota kaip rekvizitas.

Susijęs: Kaip naudoti rekvizitus „ReactJS“.

Arba galite naudoti trijų dalių operatorių. Trečias operatorius priima sąlygą, po kurios nurodomas kodas, kurį reikia vykdyti, jei sąlyga yra tiesa po kurio seka kodas, kurį reikia vykdyti, jei sąlyga yra klaidinga.

Perrašykite aukščiau pateiktą funkciją taip:

function Prietaisų skydelis (rekvizitai) {
 const { isLoggedIn } = rekvizitai
 grįžti (
 <>
 {isLogged?Atsijungti:Prisijungti)
 )
}

Dėl trijų operatoriaus funkcijų funkcija yra švaresnė ir lengviau skaitoma, palyginti su jei… kitaip pareiškimas.

Elemento kintamųjų deklaravimas

Elementų kintamieji yra kintamieji, kuriuose gali būti JSX elementų ir kurie, kai reikia, pateikiami programoje „React“.

Elementų kintamuosius galite naudoti norėdami pateikti tik tam tikrą komponento dalį, kai programa atitinka nurodytą sąlygą.

Pavyzdžiui, jei norite pateikti tik prisijungimo mygtuką, kai vartotojas nėra prisijungęs, ir atsijungimo mygtuką tik tada, kai jis yra prisijungęs, galite naudoti elementų kintamuosius.

function LoginBtn (rekvizitai) {
 grįžti (

 Prisijungti

 );
}
function LogoutBtn (rekvizitai) {
 grįžti (

 Atsijungti

 );
}
function Dashboard() {
 const [prisijungęs, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (tiesa)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 leisti mygtukas;
 if (prisijungęs) {
 mygtukas = 
 } Kitas {
 mygtukas = 
 }
 grįžti (
 <>
 {prisijungęs}
 )
}

Pirmiau pateiktame kode pirmiausia sukūrėte mygtukų „Prisijungti“ ir „Atsijungti“ komponentus, tada apibrėžkite komponentas, kad kiekvienas iš jų būtų pateiktas skirtingomis sąlygomis.

Šiame komponente naudokite „React state Hook“, kad stebėtumėte, kada vartotojas yra prisijungęs.

Susijęs: Įvaldykite savo reagavimo įgūdžius mokydamiesi šių papildomų kabliukų

Dabar, priklausomai nuo valstybės, arba pateikti arba komponentas.

Jei vartotojas neprisijungęs, padarykite komponentas kitaip perteikia the komponentas. Dvi rankenos funkcijos pakeičia prisijungimo būseną, kai paspaudžiamas atitinkamas mygtukas.

Loginių operatorių naudojimas

Galite naudoti logiką && operatorių, kad sąlygiškai atvaizduotų elementą. Čia elementas pateikiamas tik tuo atveju, jei sąlyga įvertinama kaip tiesa, priešingu atveju jis nepaisomas.

Jei norite pranešti vartotojui apie jo turimų pranešimų skaičių tik tada, kai jis turi vieną ar daugiau pranešimų, galite naudoti toliau nurodytus veiksmus.

function ShowNotifications (rekvizitai) {
 const {pranešimai} = rekvizitai
 grįžti (
 <>
 {notifications.length > 0 &&

 Turite {notifications.length} pranešimus.


 }
 )
}

Toliau, norėdami pateikti elementą, jei loginė && išraiška įvertina klaidingą reikšmę, sujunkite loginį || operatorius.

Ši funkcija rodo pranešimą „Jūs neturite pranešimų“, jei jokie pranešimai neperduodami kaip rekvizitai.

function ShowNotifications (rekvizitai) {
 const {pranešimai} = rekvizitai
 grįžti (
 <>
 {notifications.length > 0 &&

 Turite {notifications.length} pranešimus.
 || 
Neturite jokių pranešimų

 }
 )
}

Neleiskite komponentui atvaizduoti

Norėdami paslėpti komponentą, net jei jį pateikė kitas komponentas, grąžinkite nulį, o ne jo išvestį.

Apsvarstykite toliau pateiktą komponentą, kuris tik pateikia įspėjimo mygtuką, jei įspėjimo pranešimas perduodamas kaip rekvizitas.

function Įspėjimas (rekvizitai) {
 const {warningMessage} = rekvizitai
 if (!warningMessage) {
 grąžinti nul
 }
 grįžti (
 <>
Įspėjimas
 )
}

Dabar, jei perduosite „įspėjamąjį pranešimą“. komponentas, bus parodytas įspėjimo mygtukas. Tačiau jei to nepadarysite, grąžins nulį ir mygtukas nebus rodomas.

 // rodomas įspėjimo mygtukas
 // perspėjimo mygtukas nerodomas

Sąlyginio atvaizdavimo realiose reakcijose pavyzdžiai

Naudokite sąlyginį atvaizdavimą, kad atliktumėte įvairias užduotis programoje. Kai kurie iš jų apima API duomenų pateikimą tik tada, kai jie pasiekiami, ir klaidos pranešimo rodymą tik tada, kai yra klaida.

Duomenų, gautų iš API, pateikimas sistemoje „React“.

Duomenų gavimas iš API gali šiek tiek užtrukti. Todėl pirmiausia patikrinkite, ar jis pasiekiamas prieš naudodami jį savo programoje, kitaip „React“ parodys klaidą, jei ji nepasiekiama.

Ši funkcija parodo, kaip galite sąlygiškai pateikti API grąžintus duomenis.

function FetchData() {
 const [duomenys, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Gauti duomenis iš API naudojant Axios
 const fetchData = async () => {
 const atsakymas = laukti axios.get (apiURL)
 // Atnaujinkite būseną su duomenimis
 setData (response.data) 
 }
 grįžti (
 <>
Astronomijos dienos paveikslas

 {
 duomenys && 
{data.title}

{data.explanation}

 }
 )
}

Naudodami aukščiau pateiktą funkciją, gaukite duomenis iš NASA Apod API naudojant Axios. Kai API pateikia atsakymą, atnaujinkite būseną ir naudokite loginį && operatorių, kad duomenys būtų pateikti tik tada, kai jie yra pasiekiami.

Susijęs: Kaip naudoti API „React“ naudojant „Fetch“ ir „Axios“.

Klaidų pranešimų rodymas

Tais atvejais, kai norite, kad klaida būtų rodoma tik tada, kai ji egzistuoja, naudokite sąlyginį atvaizdavimą.

Pavyzdžiui, jei kuriate formą ir norite parodyti klaidos pranešimą, jei vartotojas įvedė neteisingą el. pašto formatą, atnaujinkite būseną klaidos pranešimu ir naudokite teiginį if, kad jį pateiktumėte.

function showError() {
 const [error, setError] = useState (null)
 grįžti (
 <>
 {
 if (klaida) {
Įvyko klaida: {error}

 }
 }
 )
}

Pasirinkimas, ką naudoti „React“ programoje

Šiame vadove sužinojote apie kelis būdus, kurie gali sąlygiškai pateikti JSX elementus.

Visi aptarti metodai duoda tuos pačius rezultatus. Atsižvelgdami į naudojimo atvejį ir norimą skaitomumo lygį, pasirinkite, ką naudoti.

7 geriausi nemokami vadovėliai, skirti mokytis reaguoti ir kurti žiniatinklio programas

Nemokami kursai retai būna tokie išsamūs ir naudingi, tačiau radome keletą puikių „React“ kursų, kurie padės jums pradėti teisingai.

Skaitykite toliau

Apie autorių