Bedingtes Rendering ist eines der am häufigsten verwendeten in React. Wenn die Anwendung wächst und die Dinge komplexer werden, können bedingte Rendering-Anweisungen weniger lesbar werden. In diesem Artikel werden wir besprechen, wie man mit Leichtigkeit schöne Bedingungen in React schreibt.

Gängige bedingte Rendering-Techniken

Dies sind einige Techniken, die beim Anwenden von bedingtem Rendering in React-Komponenten verwendet werden:

Verwendung von &&

Es ist eine der am häufigsten verwendeten Techniken für das bedingte Rendern. Es ist wichtig, sich daran zu erinnern, dass diese Technik sehr vorsichtig verwendet werden sollte, da sie zu unvorhersehbaren Fehlern führen kann.

Verwenden von If/Else-Anweisungen

Eine weitere Technik für das bedingte Rendering in React ist die Verwendung von if/else-Anweisungen. Es kann zu komplexem Komponentencode führen, wenn mehrere Bedingungen zu prüfen sind.

Verwenden des ternären Operators

Der ternäre Operator ist eine beliebte Technik, die für das bedingte Rendering in React verwendet wird. Das Problem bei der Verwendung des ternären Operators besteht darin, dass Sie, wenn Sie mehrere Bedingungen prüfen müssen, zur Verwendung des verschachtelten ternären Operators führen. Es kann den Code weniger lesbar und komplex machen.

Saubere Bedingungen schreiben

Einführung von , einer einfachen und winzigen React-Komponente, mit der Sie schöne Bedingungen in React schreiben können. Es ermöglicht Ihnen, schnell lesbaren bedingten Rendering-Code in React zu schreiben. Unabhängig davon, ob Sie eine einzelne Bedingung oder eine Reihe von Bedingungen testen müssen, können Sie dies mit tun .

Die Komponente funktioniert ähnlich wie if/else- und switch/case-Anweisungen. Damit können Sie eine Reihe von Bedingungen für das bedingte Rendern in React überprüfen.

Im obigen Beispiel zeigt der Code eine Nachricht basierend auf den Wochentagen an. Die letzte Bedingung ist immer wahr, wird aber nur gerendert, wenn alle oben genannten Bedingungen fehlschlagen. Es funktioniert genau wie die switch/case default - Anweisung.

Die Komponente akzeptiert die Eigenschaft isTrue , sodass Sie verschachtelte Bedingungen implementieren können. Das bedeutet, dass alle untergeordneten Bedingungen nur überprüft werden, wenn die in übergebene Bedingung als wahr ausgewertet wird.

Schauen Sie sich diese kleine React-Komponente hier auf GitHub an .

Erstellen Sie zusammensetzbare Webanwendungen

Bauen Sie keine Web-Monolithen. Verwenden Sie Bit , um entkoppelte Softwarekomponenten zu erstellen und zusammenzustellen – in Ihren bevorzugten Frameworks wie React oder Node. Erstellen Sie skalierbare und modulare Anwendungen mit einem leistungsstarken und unterhaltsamen Entwicklungserlebnis.

Bringen Sie Ihr Team zu Bit Cloud , um gemeinsam Komponenten zu hosten und zusammenzuarbeiten und die Entwicklung als Team zu beschleunigen, zu skalieren und zu standardisieren. Probieren Sie zusammensetzbare Frontends mit einem Design System oder Mikro-Frontends aus oder erkunden Sie das zusammensetzbare Backend mit serverseitigen Komponenten .

Probieren Sie es aus →

Lern mehr