javascript / beginner
Snippet
Bedingtes UI-Rendering mit Ternären Operatoren in React
In React steuert das bedingte Rendering, welche UI-Elemente basierend auf dem Zustand angezeigt werden. Die Verwendung des ternären Operators (? :) direkt im JSX ermöglicht eine Inline-Verzweigung zwischen zwei Elementen abhängig von booleschen Zuständen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { useState } from 'react';function UserGreeting() {const [isLoggedIn, setIsLoggedIn] = useState(false);return (<div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}<button onClick={() => setIsLoggedIn(!isLoggedIn)}>Toggle Status</button></div>);}export default UserGreeting;
react
Erklärung
1
const [isLoggedIn, setIsLoggedIn] = useState(false);
Deklariert eine boolesche Zustandsvariable 'isLoggedIn' mit dem Anfangswert false und deren Aktualisierungsfunktion.
2
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
Wertet 'isLoggedIn' aus, um bei true eine Begrüßung und bei false eine Anmeldeaufforderung zu rendern.
3
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>Toggle Status</button>
Stellt einen Button bereit, der den booleschen Zustand bei Klick zwischen true und false umschaltet.