Villkorlig rendering möjliggör dynamisk visning eller doldning av element baserat på specifika villkor, vilket ökar flexibiliteten hos React-komponenter. Detta avsnitt behandlar två vanliga tekniker för villkorlig rendering: &&-operatorn och ternäroperatorn.

Villkorlig rendering med &&-operatorn

Syntax

Operatorn && i React används för villkorlig rendering och fungerar på liknande sätt som ett if-uttryck i JavaScript. Den gör det möjligt att rendera element baserat på specifika villkor.

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

Denna teknik används ofta när vi vill visa ett element endast om ett visst villkor är sant.

Exempel

Vi tar ett exempel där vi vill meddela studenter som har klarat ett prov. Om en students poäng överstiger 60 poäng visas ett meddelande om framgång med deras namn och poäng.

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

Komponenten Notification renderar villkorligt ett stycke <p>-element baserat på värdet av prop:en mark.

Full appkod

Emilys poäng visas inte eftersom den är mindre än 60pts.

Villkorlig rendering med ternär operator

Syntax

Villkorlig rendering med hjälp av ternär operator (? ... : ...) är en annan kraftfull teknik. Det ger ett kortfattat sätt att rendera element baserat på villkor.

condition ? (true_element) : (false_element)

Denna metod är lämplig när man väljer mellan två olika element beroende på ett villkor.

Exempel

Tänk dig ett scenario där vi vill hälsa användare olika beroende på om de är inloggade. Greeting-komponenten visar villkorlig rendering med ternär 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 detta exempel hälsar Greeting-komponenten användare olika beroende på värdet av loggedIn-propen.

Full app-kod

Obs

Även om båda teknikerna uppnår villkorlig rendering är det viktigt att förstå deras skillnader. Operatorn && är idealisk när du vill rendera ett element endast när ett specifikt villkor är uppfyllt. Däremot är ternära operatorn lämplig i situationer där du behöver välja mellan två olika element baserat på ett villkor.