Snippet

Bedingtes Rendern mit dem logischen UND-Operator

React ermöglicht bedingtes Rendern mithilfe des logischen UND-Operators (&&) von JavaScript. Ist der linke Ausdruck 'true', wird das JSX auf der rechten Seite gerendert; ist er 'false', ignoriert React den Ausdruck.

snippet.js

javascript

function NotificationBanner({ unreadCount }) {
  const hasMessages = unreadCount > 0;
  return (
    <div>
      {hasMessages && (
        <p className="badge">You have {unreadCount} new messages!</p>
      )}
    </div>
  );
}

react

Erklärung

const hasMessages = unreadCount > 0;

Ermittelt einen booleschen Wert, der prüft, ob ungelesene Nachrichten vorhanden sind.

{hasMessages && (

Verwendet den logischen UND-Operator, um das nachfolgende JSX nur bei 'true' auszuführen.

<p className="badge">You have {unreadCount} new messages!</p>

Rendert das Benachrichtigungselement nur dann, wenn hasMessages wahr ist.

Vorheriges Snippet Nächstes Snippet

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

Bedingtes Rendern mit dem logischen UND-Operator

Verwandt