Betinget rendering gjør det mulig å vise eller skjule elementer dynamisk basert på bestemte betingelser, noe som øker fleksibiliteten til React-komponenter. Denne delen vil utforske to vanlige teknikker for betinget rendering: &&-operatoren og ternær-operatoren.

Betinget rendering med &&-operatoren

Syntaks

&&-operatoren i React brukes for betinget rendering og fungerer på samme måte som en if-setning i JavaScript. Den gjør det mulig å vise elementer basert på bestemte betingelser.

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

Denne teknikken benyttes ofte når man ønsker å vise et element kun hvis en bestemt betingelse evalueres til sann.

Eksempel

Her er et eksempel der vi ønsker å varsle studenter som har bestått en eksamen. Hvis en students poengsum overstiger 60 poeng, vises en suksessmelding med navn og poengsum.

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

Notification-komponenten viser betinget et paragraf-element <p> basert på verdien til mark-propen.

Full app-kode

Emilys poengsum vises ikke fordi den er mindre enn 60pts.

Betinget rendering med ternær operator

Syntaks

Betinget rendering ved bruk av ternær operator (? ... : ...) er en annen kraftig teknikk. Dette gir en kortfattet måte å rendre elementer basert på betingelser.

condition ? (true_element) : (false_element)

Denne tilnærmingen egner seg når man skal velge mellom to ulike elementer basert på en betingelse.

Eksempel

Tenk deg et scenario der vi ønsker å hilse brukere forskjellig avhengig av om de er innlogget. Greeting-komponenten demonstrerer betinget rendering med ternær operator.

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

I dette eksempelet hilser Greeting-komponenten brukere forskjellig basert på verdien til loggedIn-propen.

Full app-kode

Merk

Selv om begge teknikkene oppnår betinget rendering, er det viktig å forstå forskjellene mellom dem. &&-operatoren er ideell når du kun ønsker å rendre et element dersom en spesifikk betingelse er oppfylt. Derimot er ternær-operatoren egnet for tilfeller hvor du må velge mellom to ulike elementer basert på en betingelse.