Voorwaardelijke weergave maakt het mogelijk om elementen dynamisch te tonen of te verbergen op basis van bepaalde condities, waardoor de flexibiliteit van React-componenten wordt 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 voorwaardelijke weergave en werkt vergelijkbaar met een if-statement in JavaScript. Hiermee kunnen elementen worden weergegeven op basis van specifieke condities.

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

Deze techniek wordt vaak toegepast wanneer een element alleen moet worden getoond als een bepaalde conditie waar is.

Voorbeeld

Beschouw een voorbeeld waarbij we studenten willen informeren die een examen hebben gehaald. 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>
  );

De Notification-component rendert voorwaardelijk een paragraaf <p>-element op basis van de waarde van de mark prop.

Volledige app-code

De score van Emily wordt niet getoond omdat deze lager is dan 60pts.

Voorwaardelijke weergave met de Ternary-operator

Syntaxis

Conditionele weergave met behulp van de ternary-operator (? ... : ...) is een andere krachtige techniek. Het biedt een beknopte manier om elementen weer te geven 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

Beschouw een situatie waarin we gebruikers verschillend willen begroeten op basis van hun aanmeldstatus. De Greeting-component demonstreert conditionele weergave 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