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 ehdollisesti kappaleen <p> elementin 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 käyttämällä ternääristä operaattoria (? ... : ...) on toinen tehokas tekniikka. Se tarjoaa tiiviin tavan renderöidä elementtejä ehtojen perusteella.

condition ? (true_element) : (false_element)

Tämä lähestymistapa sopii 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 ehdollista renderöintiä ternäärisellä operaattorilla.

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