Ehdollinen renderöinti viittaa sovelluksen toiminnan muuttamiseen sen tilasta riippuen. Voit esimerkiksi muuttaa React-sovelluksesi tervehdysviestin pimeäksi yöllä. Näin näyttöön tulee erilainen viesti kellonajasta riippuen.

Ehdollisen renderöinnin avulla voit hahmontaa erilaisia ​​React-komponentteja tai -elementtejä, jos ehto täyttyy. Tässä opetusohjelmassa opit eri tavoista, joilla voit käyttää ehdollista renderöintiä React.js-sovelluksissa.

Tapoja, joilla voit toteuttaa ehdollisen renderöinnin

Jotta voit seurata näitä esimerkkejä, sinulla on oltava perustiedot Reactin toiminnasta. Jos sinulla on vaikeuksia siinä tapauksessa, älä huoli – meillä on hyödyllinen React.js: n aloittelijaopas.

Ehdollisten lausekkeiden käyttö

Kuten JavaScriptissä, voit käyttää ehdollisia lauseita, kuten if…else, luodaksesi elementtejä, kun tietyt ehdot täyttyvät.

Voit esimerkiksi näyttää tietyn elementin jos estää, kun ehto täyttyy, ja näytä erilainen muu estää, jos ehto ei täyty.

Harkitse seuraavaa esimerkkiä, joka näyttää joko sisään- tai uloskirjautumispainikkeen käyttäjän kirjautumistilan mukaan.

function Dashboard (rekvisiitta) {
 const { isLoggedIn } = rekvisiitta
 if (isKirjautunut){
 palata Kirjautua ulos
 } else{
 palata Kirjaudu sisään
 }
}

Tämä toiminto näyttää erilaisen painikkeen riippuen onKirjautunut sisään arvo välitetty rekvisiitta.

Aiheeseen liittyvä: Propsien käyttäminen ReactJS: ssä

Vaihtoehtoisesti voit käyttää kolmiosaista operaattoria. Kolmiosainen operaattori ottaa ehdon, jota seuraa suoritettava koodi, jos ehto on totuudenmukainen jota seuraa suoritettava koodi, jos ehto on valheellinen.

Kirjoita yllä oleva funktio uudelleen muotoon:

function Dashboard (rekvisiitta) {
 const { isLoggedIn } = rekvisiitta
 paluu (
 <>
 {isLogged?Kirjautua ulos:Kirjaudu sisään)
 )
}

Kolmiosainen operaattori tekee toiminnosta puhtaamman ja helpompi lukea verrattuna tai muuten lausunto.

Elementin muuttujien ilmoittaminen

Elementtimuuttujat ovat muuttujia, jotka voivat sisältää JSX-elementtejä ja jotka voidaan hahmontaa tarvittaessa React-sovelluksessa.

Voit käyttää elementtimuuttujia hahmontaaksesi vain tietyn osan komponentista, kun sovelluksesi täyttää määritetyt ehdot.

Jos esimerkiksi haluat hahmontaa vain kirjautumispainikkeen, kun käyttäjä ei ole kirjautunut sisään, ja uloskirjautumispainikkeen vain, kun hän on kirjautunut sisään, voit käyttää elementtimuuttujia.

function LoginBtn (rekvisiitta) {
 paluu (

 Kirjaudu sisään

 );
}
function LogoutBtn (rekvisiitta) {
 paluu (

 Kirjautua ulos

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (true)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 anna painike;
 if (kirjautunut sisään) {
 painike = 
 } muu {
 painike = 
 }
 paluu (
 <>
 {kirjautunut sisään}
 )
}

Yllä olevassa koodissa loi ensin sisäänkirjautumis- ja uloskirjautumispainikkeen komponentit ja määritä sitten komponentin renderöimiseksi niistä eri olosuhteissa.

Käytä tässä komponentissa React state hook -toimintoa seurataksesi, milloin käyttäjä on kirjautunut sisään.

Aiheeseen liittyvä: Hallitse reagointitaitosi oppimalla nämä lisäkoukut

Nyt, riippuen osavaltiosta joko tehdä tai komponentti.

Jos käyttäjä ei ole kirjautunut sisään, renderöi komponentti muutoin tekee the komponentti. Kaksi kahvatoimintoa muuttavat kirjautumistilaa, kun vastaavaa painiketta napsautetaan.

Loogisten operaattoreiden käyttäminen

Voit käyttää loogista && operaattoria ehdollisesti renderöimään elementin. Tässä elementti hahmonnetaan vain, jos ehto on tosi, muuten se jätetään huomiotta.

Jos haluat ilmoittaa käyttäjälle, kuinka monta ilmoitusta hänellä on vain silloin, kun hänellä on yksi tai useampi ilmoitus, voit käyttää seuraavaa.

function ShowNotifications (rekvisiitta) {
 const { ilmoitukset } = rekvisiitta
 paluu (
 <>
 {notifications.length > 0 &&

 Sinulla on {notifications.length} ilmoitusta.


 }
 )
}

Seuraavaksi, jos haluat hahmontaa elementin, jos looginen &&-lauseke antaa väärän arvon, ketjuta looginen || operaattori.

Seuraava toiminto näyttää "Sinulla ei ole ilmoituksia" -viestin, jos mitään ilmoituksia ei välitetä rekvisiittana.

function ShowNotifications (rekvisiitta) {
 const { ilmoitukset } = rekvisiitta
 paluu (
 <>
 {notifications.length > 0 &&

 Sinulla on {notifications.length} ilmoitusta.
 || 
Sinulla ei ole ilmoituksia

 }
 )
}

Estä komponenttia hahmontamasta

Jos haluat piilottaa komponentin, vaikka se on muunnettu toisella komponentilla, palauta null sen tulosteen sijaan.

Harkitse seuraavaa komponenttia, joka näyttää varoituspainikkeen vain, jos varoitusviesti välitetään rekvisiittana.

toiminto Varoitus (rekvisiitta) {
 const {warningMessage} = rekvisiitta
 if (!warningMessage) {
 palautus null
 }
 paluu (
 <>
Varoitus
 )
}

Nyt, jos lähetät "varoitusviestin" osoitteeseen komponentti, varoituspainike näytetään. Jos et kuitenkaan, palauttaa nollan eikä painiketta näytetä.

 // varoituspainike näytetään
 // varoituspainiketta ei hahmonneta

Esimerkkejä ehdollisesta renderöinnistä tosielämän React-sovelluksissa

Käytä ehdollista renderöintiä erilaisten tehtävien suorittamiseen sovelluksessasi. Jotkut niistä sisältävät API-tietojen renderöimisen vain, kun niitä on saatavilla, ja virhesanoman näyttämistä vain, kun virhe on olemassa.

Reactin API: sta haetun datan renderöinti

Tietojen hakeminen API: sta voi kestää hetken. Siksi tarkista ensin, onko se saatavilla, ennen kuin käytät sitä sovelluksessasi, muuten React antaa virheilmoituksen, jos se ei ole käytettävissä.

Seuraava toiminto näyttää, kuinka voit ehdollisesti renderöidä API: n palauttamat tiedot.

function FetchData() {
 const [data, setData] = useState (nolla);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_Avain";
 // Hae tiedot API: sta Axiosin avulla
 const fetchData = async () => {
 const vastaus = odota axios.get (apiURL)
 // Päivitä tila tiedoilla
 setData (response.data) 
 }
 paluu (
 <>
Päivän tähtitieteen kuva

 {
 tiedot && 
{data.title}

{data.selitys}

 }
 )
}

Yllä olevassa toiminnossa nouta tiedot osoitteesta NASA Apod API käyttämällä Axiosta. Kun API palauttaa vastauksen, päivitä tila ja käytä loogista &&-operaattoria, jotta tiedot näytetään vain, kun ne ovat saatavilla.

Aiheeseen liittyvä: API: ien käyttäminen Reactissa Fetchin ja Axiosin avulla

Virheilmoitusten näyttäminen

Jos haluat näyttää virheen vain silloin, kun se on olemassa, käytä ehdollista hahmontamista.

Jos esimerkiksi luot lomaketta ja haluat näyttää virheilmoituksen, jos käyttäjä on kirjoittanut väärän sähköpostimuodon, päivitä tila virheilmoituksella ja käytä if-lausetta sen hahmontamiseen.

function showError() {
 const [error, setError] = useState (null)
 paluu (
 <>
 {
 jos (virhe) {
Tapahtui virhe: {error}

 }
 }
 )
}

React-sovelluksessa käytettävän sisällön valitseminen

Tässä opetusohjelmassa opit useista tavoista, jotka voivat ehdollisesti hahmontaa JSX-elementtejä.

Kaikki käsitellyt menetelmät tuottavat samat tulokset. Tee valinta, mitä käytät käyttötapauksen ja saavutettavan luettavuuden tason mukaan.

7 parasta ilmaista opetusohjelmaa reagoinnin oppimiseen ja verkkosovellusten tekemiseen

Ilmaiset kurssit ovat harvoin yhtä kattavia ja hyödyllisiä – mutta olemme löytäneet useita React-kursseja, jotka ovat erinomaisia ​​ja auttavat sinua pääsemään alkuun oikealla jalalla.

Lue Seuraava

Kirjailijasta