Voorwaardelijke weergave maakt het mogelijk om elementen dynamisch te tonen of te verbergen op basis van bepaalde condities, wat de flexibiliteit van React-componenten vergroot. In deze sectie worden twee standaardtechnieken voor voorwaardelijke weergave behandeld: de &&-operator en de ternary-operator.

Voorwaardelijke weergave met de &&-operator

Syntax

De &&-operator in React wordt gebruikt voor conditionele weergave en werkt vergelijkbaar met een if-statement in JavaScript. Hiermee kunnen we elementen weergeven op basis van specifieke voorwaarden.

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

Deze techniek wordt vaak toegepast wanneer we een element alleen willen tonen als een bepaalde voorwaarde waar is.

Voorbeeld

Laten we een voorbeeld nemen waarin we studenten willen informeren die geslaagd zijn voor een examen. Als de score van een student hoger is dan 60 punten, tonen we een succesbericht met hun naam en score.

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

Het Notification-component geeft conditioneel een paragraaf <p>-element weer op basis van de waarde van de mark-prop.

Volledige app-code

Emily's score wordt niet weergegeven omdat deze lager is dan 60pts.

Conditioneel renderen met de Ternary-operator

Syntax

Conditioneel renderen met behulp van de ternary-operator (? ... : ...) is een andere krachtige techniek. Het biedt een beknopte manier om elementen te renderen op basis van voorwaarden.

condition ? (true_element) : (false_element)

Deze aanpak is geschikt wanneer er gekozen moet worden tussen twee verschillende elementen op basis van een voorwaarde.

Voorbeeld

Stel een scenario voor waarin we gebruikers verschillend willen begroeten op basis van hun aanmeldstatus. De Greeting-component demonstreert conditioneel renderen met de ternary-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>
  );

In dit voorbeeld begroet de Greeting-component gebruikers verschillend op basis van de waarde van de loggedIn-prop.

Volledige app-code

Opmerking

Hoewel beide technieken voorwaardelijke weergave mogelijk maken, is het belangrijk hun verschillen te begrijpen. De &&-operator is ideaal wanneer een element alleen weergegeven moet worden als aan een specifieke voorwaarde is voldaan. Daarentegen is de ternary-operator geschikt voor situaties waarin gekozen moet worden tussen twee verschillende elementen op basis van een voorwaarde.