Snippet

Verzweigung der UI-Ausgabe basierend auf Status-String-Typen

Switch-Anweisungen prüfen einen Wert gegen mehrere Fallunterscheidungen. Der Vergleich von String-Werten ermöglicht es Komponenten, je nach Status sauber verschiedene JSX-Ansichten zurückzugeben.

snippet.js

javascript

import React from 'react';
 
function StatusBadge({ status }) {
  switch (status) {
    case 'online':
      return <span className="badge green">Active Now</span>;
    case 'offline':
      return <span className="badge gray">Disconnected</span>;
    case 'busy':
      return <span className="badge red">Do Not Disturb</span>;
    default:
      return <span className="badge">Unknown Status</span>;
  }
}

react

Erklärung

switch (status) {

Startet die Kontrollfluss-Verzweigung anhand des übergebenen Status-Strings.

default: return <span className="badge">Unknown Status</span>;

Bietet einen Standard-Zweig, falls ein unerwarteter oder nicht unterstützter Wert übergeben wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Verzweigung der UI-Ausgabe basierend auf Status-String-Typen

Verwandt