Tingimuslik renderdamine viitab rakenduse käitumise muutmisele olenevalt selle olekust. Näiteks saate oma Reacti rakenduse tervitussõnumi öösel pimedaks muuta. Nii kuvatakse olenevalt kellaajast erinev ekraaniteade.

Tingimuslik renderdamine võimaldab teil renderdada erinevaid Reacti komponente või elemente, kui tingimus on täidetud. Sellest õpetusest saate teada, kuidas saate React.js rakendustes tingimuslikku renderdamist kasutada.

Tingimusliku renderdamise rakendamise viisid

Nende näidete järgimiseks peate omama põhiteadmisi Reacti toimimisest. Kui teil on sel juhul raskusi, ärge muretsege – meil on kasulik React.js juhend algajatele.

Tingimuslausete kasutamine

Nagu JavaScriptis, saate teatud tingimuste täitmisel elementide loomiseks kasutada tingimuslauseid (nt if…else).

Näiteks saate kuvada määratud elemendi rakenduses kui blokeerige, kui tingimus on täidetud, ja kuvage jaotises teistsugune muidu blokeerida, kui tingimus ei ole täidetud.

Vaatleme järgmist näidet, mis sõltuvalt kasutaja sisselogimisolekust kuvab sisse- või väljalogimisnupu.

function Armatuurlaud (rekvisiidid) {
 const { isLoggedIn } = rekvisiidid
 if (isLoggedIn){
 tagasi Logi välja
 } else{
 tagasi Logi sisse
 }
}

See funktsioon renderdab sõltuvalt funktsioonist erineva nupu on sisselogitud väärtus edastatud kui rekvisiit.

Seotud: Kuidas kasutada ReactJS-is rekvisiite

Teise võimalusena võite kasutada kolmepoolset operaatorit. Kolmekomponentne operaator võtab tingimuse, millele järgneb käivitatav kood, kui tingimus on tõetruu millele järgneb käivitatav kood, kui tingimus on võlts.

Kirjutage ülaltoodud funktsioon ümber järgmiselt:

function Armatuurlaud (rekvisiidid) {
 const { isLoggedIn } = rekvisiidid
 tagasi (
 <>
 {isLogged?Logi välja:Logi sisse)
 )
}

Kolmekordne operaator muudab funktsiooni funktsiooniga võrreldes puhtamaks ja hõlpsamini loetavaks kui...muidu avaldus.

Elemendi muutujate deklareerimine

Elemendimuutujad on muutujad, mis võivad sisaldada JSX-i elemente ja mida võidakse Reacti rakenduses vajaduse korral renderdada.

Elemendimuutujate abil saate renderdada ainult teatud osa komponendist, kui teie rakendus vastab määratud tingimusele.

Näiteks kui soovite renderdada ainult sisselogimisnupu, kui kasutaja pole sisse logitud, ja väljalogimisnupu ainult siis, kui ta on sisse logitud, saate kasutada elementide muutujaid.

function LoginBtn (rekvisiidid) {
 tagasi (

 Logi sisse

 );
}
function LogoutBtn (rekvisiidid) {
 tagasi (

 Logi välja

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (tõene)
 const handleLogin = () => {
 setLoggedIn (tõene)
 }
 const handleLogout = () => {
 setLoggedIn (vale)
 }
 lase nupp;
 if (sisse logitud) {
 nupp = 
 } muu {
 nupp = 
 }
 tagasi (
 <>
 {sisse logitud}
 )
}

Ülaltoodud koodis lõite esmalt sisselogimis- ja väljalogimisnupu komponendid, seejärel määratlege komponendina, et renderdada igaüks neist erinevatel tingimustel.

Selles komponendis kasutage React State Hooki, et jälgida, millal kasutaja on sisse logitud.

Seotud: Õppige need lisakonksud selgeks oma reageerimisoskused

Nüüd, olenevalt osariigist, renderdage kas või komponent.

Kui kasutaja pole sisse logitud, renderdage komponent muul viisil muuta the komponent. Kaks käepideme funktsiooni muudavad vastava nupu klõpsamisel sisselogimisolekut.

Loogiliste operaatorite kasutamine

Võite kasutada loogikat && elemendi tingimuslikuks renderdamiseks. Siin renderdatakse element ainult siis, kui tingimus on tõene, vastasel juhul ignoreeritakse.

Kui soovite teavitada kasutajat teavituste arvust ainult siis, kui tal on üks või mitu märguannet, saate kasutada järgmist.

function ShowNotifications (rekvisiidid) {
 const { teatised } = rekvisiidid
 tagasi (
 <>
 {notifications.length > 0 &&

 Teil on {notifications.length} märguanne.


 }
 )
}

Järgmiseks elemendi renderdamiseks, kui loogiline && avaldis hindab valeväärtust, aheldage loogiline || operaator.

Järgmine funktsioon kuvab teate „Teil pole teateid”, kui ühtegi teatist ei edastata rekvisiidina.

function ShowNotifications (rekvisiidid) {
 const { teatised } = rekvisiidid
 tagasi (
 <>
 {notifications.length > 0 &&

 Teil on {notifications.length} märguanne.
 || 
Teil pole märguandeid

 }
 )
}

Vältige komponendi renderdamist

Komponendi peitmiseks, kuigi selle renderdas mõni muu komponent, tagastage selle väljundi asemel null.

Kaaluge järgmist komponenti, mis kuvab hoiatusnupu ainult siis, kui hoiatusteade edastatakse rekvisiidina.

function Hoiatus (rekvisiidid) {
 const {hoiatussõnum} = rekvisiidid
 if (!hoiatussõnum) {
 tagasta null
 }
 tagasi (
 <>
Hoiatus
 )
}

Nüüd, kui saadate hoiatussõnumi aadressile komponent, renderdatakse hoiatusnupp. Kui te aga seda ei tee, tagastab null ja nuppu ei kuvata.

 // renderdatakse hoiatusnupp
 // hoiatusnuppu ei renderdata

Näited tingimusliku renderdamise kohta reaalelu reageerimisrakendustes

Kasutage oma rakenduses erinevate ülesannete täitmiseks tingimuslikku renderdamist. Mõned neist hõlmavad API andmete renderdamist ainult siis, kui need on saadaval, ja veateate kuvamist ainult tõrke korral.

Reactis API-lt toodud andmete renderdamine

API-st andmete toomine võib veidi aega võtta. Seetõttu kontrollige enne selle kasutamist oma rakenduses esmalt, kas see on saadaval, vastasel juhul annab React veateate, kui see pole saadaval.

Järgmine funktsioon näitab, kuidas saate API tagastatud andmeid tingimuslikult renderdada.

function FetchData() {
 const [andmed, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Andmete toomine API-st Axiose abil
 const fetchData = async () => {
 const vastus = oodake axios.get (apiURL)
 // Värskendage olekut andmetega
 setData (response.data) 
 }
 tagasi (
 <>
Päeva astronoomiapilt

 {
 andmed && 
{data.title}

{data.explanation}

 }
 )
}

Ülaltoodud funktsiooni puhul hankige andmed saidilt NASA Apod API kasutades Axiost. Kui API tagastab vastuse, värskendage olekut ja kasutage loogilist &&-operaatorit, et renderdada andmed ainult siis, kui need on saadaval.

Seotud: API-de kasutamine Reactis, kasutades funktsiooni Fetch ja Axios

Veateadete kuvamine

Juhtudel, kui soovite kuvada vea ainult siis, kui see on olemas, kasutage tingimuslikku renderdamist.

Näiteks kui loote vormi ja soovite kuvada veateate, kui kasutaja sisestas vales vormingus e-kirja, värskendage olekut veateate abil ja kasutage selle renderdamiseks if-lauset.

function showError() {
 const [viga, setError] = useState (null)
 tagasi (
 <>
 {
 if (viga) {
Ilmnes viga: {error}

 }
 }
 )
}

Reacti rakenduses kasutatava rakenduse valimine

Sellest õpetusest õppisite mitmel viisil, kes saavad JSX-i elemente tingimuslikult renderdada.

Kõik kirjeldatud meetodid annavad sama tulemuse. Tehke valik, mida kasutada, olenevalt kasutusjuhtumist ja soovitud loetavuse tasemest.

7 parimat tasuta õpetust reageerimise õppimiseks ja veebirakenduste loomiseks

Tasuta kursused on harva nii põhjalikud ja kasulikud – kuid oleme leidnud mitu Reacti kursust, mis on suurepärased ja aitavad teil õigel teel alustada.

Loe edasi

Autori kohta