Villkorlig rendering gör det möjligt att visa eller dölja element baserat på vissa villkor dynamiskt, vilket ökar flexibiliteten hos React-komponenter. Denna sektion 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 möjliggör rendering av element baserat på specifika villkor.

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

Denna teknik används ofta när ett element endast ska visas 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.

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 väljer mellan två olika element baserat 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 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 olika beroende på värdet av loggedIn-propet.

Full app-kod