javascript / beginner
Snippet
Bedingtes Rendering mit dem logischen UND
In JSX ist der logische UND-Operator (&&) ein prägnanter Weg, um ein Element nur dann zu rendern, wenn eine Bedingung wahr ist. Wenn die Bedingung falsch ist, überspringt React den Ausdruck vollständig.
snippet.js
javascript
1
2
3
4
5
6
7
export default function Welcome({ isLoggedIn }) {return (<div>{isLoggedIn && <p>Welcome back, user!</p>}</div>);}
nextjs
Erklärung
1
{isLoggedIn && ...}
Wertet die Variable aus. Wenn sie wahr ist, wird der nächste Teil des Ausdrucks verarbeitet.
2
<p>Welcome back, user!</p>
Das JSX-Element, das nur gerendert wird, wenn die vorangegangene Bedingung wahr ist.