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 halutaan ilmoittaa opiskelijoille, jotka ovat läpäisseet kokeen. Jos opiskelijan pistemäärä ylittää 60 pistettä, näytetään onnistumisviesti, 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äärisen operaattorin avulla

Syntaksi

Ehdollinen renderöinti ternäärisen operaattorin (? ... : ...) avulla 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 halutaan tervehtiä käyttäjiä eri tavoin kirjautumistilan perusteella. Greeting-komponentti havainnollistaa ehdollista renderöintiä ternäärisen operaattorin avulla.

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

Huomio

Vaikka molemmat tekniikat mahdollistavat ehdollisen renderöinnin, on tärkeää ymmärtää niiden erot. &&-operaattori sopii tilanteisiin, joissa halutaan renderöidä elementti vain, kun tietty ehto täyttyy. Sen sijaan ternäärinen operaattori on tarkoituksenmukainen, kun täytyy valita kahden eri elementin välillä ehdon perusteella.