javascript / beginner
Snippet
Umschalten von booleschen Zuständen für die bedingte Overlay-Sichtbarkeit
Boolesche Datentypen im React-Zustand bieten eine saubere Möglichkeit, umschaltbare UI-Komponenten zu steuern. Das logische UND (&&) mit einem booleschen Flag rendert Elemente nur dann bedingt, wenn das Flag 'true' ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useState } from 'react';export function ModalController() {const [isOpen, setIsOpen] = useState(false);return (<div><button onClick={() => setIsOpen((prev) => !prev)}>Toggle Dialog</button>{isOpen && <aside className="dialog-box">Modal Content</aside>}</div>);}
react
Erklärung
1
const [isOpen, setIsOpen] = useState(false);
Initialisiert eine boolesche Zustandsvariable, um zu speichern, ob das Modal sichtbar oder verborgen ist.
2
<button onClick={() => setIsOpen((prev) => !prev)}>
Kehrt den aktuellen booleschen Zustandswert bei jedem Klick auf den Button um.
3
{isOpen && <aside className="dialog-box">Modal Content</aside>}
Rendert das Modal-Markup nur dann bedingt, wenn isOpen 'true' ergibt.