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 undersöka 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-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 utvärderas till 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 visar vi ett framgångsmeddelande 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 mark-propen.

Komplett 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 det ternära operatorn (? ... : ...) är en annan kraftfull teknik. Det ger ett koncist sätt att rendera element baserat på villkor.

condition ? (true_element) : (false_element)

Denna metod är lämplig när du vill välja mellan två olika element baserat på ett villkor.

Exempel

Tänk dig ett scenario där vi vill hälsa användare på olika sätt beroende på om de är inloggade. Greeting-komponenten demonstrerar 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.

Full app code