Ehdollinen renderöinti mahdollistaa elementtien näyttämisen tai piilottamisen dynaamisesti tiettyjen ehtojen perusteella, mikä lisää React-komponenttien joustavuutta. Tässä osiossa käsitellään kahta yleistä ehdollisen renderöinnin tekniikkaa: &&-operaattori ja ternäärinen operaattori.

Ehdollinen renderöinti &&-operaattorilla

Syntaksi

&&-operaattoria käytetään Reactissa ehdolliseen renderöintiin, ja se toimii samalla tavalla kuin if-lause JavaScriptissä. Sen avulla voidaan renderöidä elementtejä tiettyjen ehtojen perusteella.

condition && (<p>element</p>)

Tätä tekniikkaa käytetään usein, kun halutaan näyttää elementti vain, jos tietty ehto toteutuu.

Esimerkki

Tarkastellaan esimerkkiä, jossa haluamme ilmoittaa opiskelijoille, jotka ovat läpäisseet kokeen. Jos opiskelijan pistemäärä ylittää 60 pistettä, näytämme onnistumisviestin, jossa on hänen nimensä ja pistemääränsä.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Notification-komponentti renderöi kappaleen <p> ehdollisesti mark-propin arvon perusteella.

Koko sovelluksen koodi

Emilyn pistemäärää ei näytetä, koska se on alle 60pts.

Ehdollinen renderöinti ternäärillä operaattorilla

Syntaksi

Ehtoperusteinen renderöinti käyttämällä ternäärioperaattoria (? ... : ...) on toinen tehokas tekniikka. Se tarjoaa tiiviin tavan renderöidä elementtejä ehtojen perusteella.

condition ? (true_element) : (false_element)

Tämä lähestymistapa soveltuu tilanteisiin, joissa valitaan kahden eri elementin välillä ehdon perusteella.

Esimerkki

Tarkastellaan tilannetta, jossa haluamme tervehtiä käyttäjiä eri tavoin heidän kirjautumistilansa perusteella. Greeting-komponentti havainnollistaa ehtoperusteista renderöintiä ternäärioperaattorilla.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

Tässä esimerkissä Greeting-komponentti tervehtii käyttäjiä eri tavoin loggedIn-propin arvon perusteella.

Koko sovelluksen koodi