Renderowanie warunkowe jest jednym z najczęściej używanych w React. Wraz z rozwojem aplikacji i stopniem złożoności instrukcje renderowania warunkowego mogą stać się mniej czytelne. W tym artykule omówimy, jak z łatwością pisać piękne instrukcje warunkowe w React.

Typowe techniki renderowania warunkowego

Oto kilka technik stosowanych podczas stosowania renderowania warunkowego w komponentach React:

Za pomocą &&

Jest to jedna z najczęściej używanych technik renderowania warunkowego. Należy pamiętać, że tej techniki należy używać bardzo ostrożnie, ponieważ może ona prowadzić do nieprzewidywalnych błędów.

Używanie instrukcji if/else

Inną techniką warunkowego renderowania w React jest użycie instrukcji if/else. Może to skutkować złożonym kodem komponentu, gdy istnieje wiele warunków do sprawdzenia.

Korzystanie z operatora trójskładnikowego

Operator trójskładnikowy jest popularną techniką używaną do renderowania warunkowego w React. Problem z użyciem operatora trójskładnikowego polega na tym, że gdy trzeba sprawdzić wiele warunków, prowadzi to do użycia zagnieżdżonego operatora trójskładnikowego. Może sprawić, że kod będzie mniej czytelny i złożony.

Pisanie czystych warunków warunkowych

Przedstawiamy , prosty i mały komponent React, który pozwala pisać piękne instrukcje warunkowe w React. Umożliwi Ci to szybkie napisanie czytelnego, warunkowego kodu renderującego w React. Niezależnie od tego, czy chcesz przetestować pojedynczy warunek, czy serię warunków, możesz to zrobić za pomocą .

Komponent działa podobnie do instrukcji if/else i switch/case. Pozwala sprawdzić szereg warunków renderowania warunkowego w React.

W powyższym przykładzie kod wyświetla komunikat na podstawie dni tygodnia. Ostatni warunek jest zawsze prawdziwy, ale zostanie wyświetlony tylko wtedy, gdy nie spełnią się wszystkie powyższe warunki. Działa dokładnie tak, jak instrukcja switch/case default .

Komponent akceptuje właściwość isTrue , umożliwiając implementację zagnieżdżonych warunków. Oznacza to, że wszystkie warunkowe elementy podrzędne zostaną sprawdzone tylko wtedy, gdy warunek przekazany w ma wartość true.

Sprawdź ten mały komponent React tutaj na GitHub .

Twórz komponowalne aplikacje internetowe

Nie buduj internetowych monolitów. Używaj Bit do tworzenia i komponowania oddzielonych komponentów oprogramowania — w swoich ulubionych frameworkach, takich jak React lub Node. Twórz skalowalne i modułowe aplikacje dzięki wydajnemu i przyjemnemu środowisku programistycznemu.

Przenieś swój zespół do Bit Cloud , aby wspólnie hostować i współpracować nad komponentami oraz przyspieszać, skalować i standaryzować programowanie jako zespół. Wypróbuj komponowalne frontendy z Design System lub Micro Frontends lub poznaj komponowalny backend z komponentami po stronie serwera .

Spróbuj →

Ucz się więcej