0 Tage Serie
javascript / beginner
Snippet

Bedingte Benutzeroberfläche mit dem Ternären Operator

Der ternäre Operator (? :) ermöglicht es dir, basierend auf einer Bedingung verschiedene UI-Elemente direkt in deinem JSX zu rendern.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
function WelcomeMessage(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn
? <h1>Welcome back!</h1>
: <h1>Please sign in.</h1>
}
</div>
);
}
react
Erklärung
1
{isLoggedIn ? <h1>...</h1> : <h1>...</h1>}
Wenn 'isLoggedIn' wahr ist, wird das erste Element gerendert; andernfalls wird das zweite gerendert.