Betinget rendering gør det muligt dynamisk at vise eller skjule elementer baseret på bestemte betingelser, hvilket øger fleksibiliteten i React-komponenter. Dette afsnit vil undersøge to almindelige teknikker til betinget rendering: &&-operatoren og ternær-operatoren.

Betinget rendering med &&-operatoren

Syntaks

&&-operatoren i React bruges til betinget rendering og fungerer på samme måde som en if-sætning i JavaScript. Den gør det muligt at gengive elementer baseret på specifikke betingelser.

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

Denne teknik anvendes ofte, når man kun ønsker at vise et element, hvis en bestemt betingelse evalueres til sand.

Eksempel

Lad os tage et eksempel, hvor vi ønsker at give besked til studerende, der har bestået en eksamen. Hvis en studerendes score overstiger 60 point, vises en succesmeddelelse med deres navn og score.

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

Notification-komponenten gengiver betinget et paragraf-<p>-element baseret på værdien af mark-proppen.

Fuld app-kode

Emilys score vises ikke, fordi den er mindre end 60pts.

Betinget rendering med det ternære operator

Syntaks

Betinget rendering ved brug af det ternære operator (? ... : ...) er en anden effektiv teknik. Det giver en kortfattet måde at gengive elementer baseret på betingelser.

condition ? (true_element) : (false_element)

Denne tilgang er velegnet, når der skal vælges mellem to forskellige elementer baseret på en betingelse.

Eksempel

Overvej et scenarie, hvor vi ønsker at hilse på brugere forskelligt afhængigt af, om de er logget ind. Greeting-komponenten demonstrerer betinget rendering med det ternære 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 eksempel hilser Greeting-komponenten brugere forskelligt afhængigt af værdien af loggedIn-proppen.

Fuld app-kode