Betinget rendering gjør det mulig å vise eller skjule elementer dynamisk basert på visse 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 å rendre elementer basert på spesifikke betingelser.

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

Denne teknikken brukes ofte når vi kun ønsker å vise et element dersom en bestemt betingelse evalueres til true.

Eksempel

La oss ta et eksempel der vi ønsker å varsle studenter som har bestått en eksamen. Hvis en students poengsum overstiger 60 poeng, viser vi en suksessmelding med deres navn og poengsum.

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

Notification-komponenten gjengir betinget et avsnittselement <p> basert på verdien til mark-propen.

Full app-kode

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

Betinget gjengivelse med den ternære operatoren

Syntaks

Betinget rendering ved bruk av den ternære operatoren (? ... : ...) 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 den ternære operatoren.

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