Villkorlig rendering gör det möjligt att visa eller dölja element baserat på vissa villkor dynamiskt, vilket ökar flexibiliteten hos React-komponenter. Detta avsnitt kommer att utforska två vanliga tekniker för villkorlig rendering: &&-operatorn och ternära operatorn.

Villkorlig rendering med &&-operatorn

Syntax

&&-operatorn i React används för villkorlig rendering och fungerar på liknande sätt som ett if-uttalande 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

Låt oss ta ett exempel där vi vill meddela studenter som har klarat ett prov. Om en students poäng överstiger 60 poäng visar vi 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.

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

Villkorlig rendering med ternär operator

Syntax

Villkorlig rendering med hjälp av det ternära operatorn (? ... : ...) ä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 baserat på ett villkor.

Exempel

Tänk på ett scenario där vi vill hälsa användare på olika sätt beroende på om de är inloggade. Greeting-komponenten visar villkorlig rendering med det ternära operatorn.

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 på olika sätt beroende på värdet av loggedIn-propen.