Betinget rendering gør det muligt at vise eller skjule elementer dynamisk baseret på bestemte betingelser, hvilket øger fleksibiliteten i React-komponenter. Dette afsnit gennemgår to almindelige teknikker til betinget rendering: &&-operatoren og ternary-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 vi 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 på brugere forskelligt afhængigt af værdien af loggedIn-proppen.

Fuld app-kode

Bemærk

Selvom begge teknikker opnår betinget rendering, er det vigtigt at forstå deres forskelle. &&-operatoren er ideel, når du kun vil gengive et element, hvis en bestemt betingelse er opfyldt. Omvendt er ternær-operatoren velegnet i situationer, hvor du skal vælge mellem to forskellige elementer baseret på en betingelse.