javascript / intermediate
Snippet
Bedingtes Multi-Schritt-Rendern mittels Switch-Anweisungen auf diskriminierten Zuständen
Die Verwendung einer `switch`-Anweisung über diskriminierte Status-Strings ermöglicht eine transparente Ablaufsteuerung für mehrstufige React-Workflows. Ein Default-Zweig mit Fehlerbehandlung stellt sicher, dass undefinierte Zustände sofort abgefangen werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function RegistrationFlow({ onComplete }) {const [stepState, setStepState] = React.useState({ stage: 'EMAIL', data: {} });const advance = (nextStage, payload) => {setStepState((prev) => ({ stage: nextStage, data: { ...prev.data, ...payload } }));};const renderStage = () => {switch (stepState.stage) {case 'EMAIL':return <button onClick={() => advance('PASSWORD', { email: '[email protected]' })}>Submit Email</button>;case 'PASSWORD':return <button onClick={() => advance('CONFIRM', { pass: 'secret' })}>Set Password</button>;case 'CONFIRM':return <button onClick={() => onComplete(stepState.data)}>Finalize</button>;default: {const exhaustiveCheck = stepState.stage;throw new Error(`Unhandled wizard stage: ${exhaustiveCheck}`);}}};return <main className="wizard-container">{renderStage()}</main>;}
react
Erklärung
1
switch (stepState.stage) {
Prüft die explizite stage-Eigenschaft, um die passende Schritt-Ansicht auszuwählen.
2
case 'EMAIL':
Verzweigt zur ersten Eingabestufe und bindet die Zustandsaktualisierung an Aktionen.
3
const exhaustiveCheck = stepState.stage;
Garantiert, dass unbekannte Statuswerte eine aussagekräftige Ausnahme auslösen.