rendering-conditional-render

Ta umiejętność uczy Cię, jak unikać pułapek renderowania warunkowego w komponentach React. Problem: operator && renderuje wartości falsy takie jak 0 lub NaN, co prowadzi do nieoczekiwanego wyświetlania liczb na ekranie. Rozwiązanie: zamień && na jawny operator trójargumentowy (? :), który daje pełną kontrolę nad tym, co się wyświetla. Szczególnie przydatne, gdy pracujesz z licznikami, wskaźnikami lub innymi wartościami numerycznymi, które mogą być zerem.

1. Zidentyfikuj miejsca w kodzie, gdzie używasz operatora && do renderowania warunkowego, zwłaszcza gdy warunek może być wartością numeryczną (0, NaN) lub inną wartością falsy, która powinna być traktowana jako "fałsz" w logice biznesowej.
2. Zastąp wzorzec {warunek && } na {warunek ? : null}, gdzie warunek jest jawnym porównaniem (np. count > 0 zamiast count).
3. W praktyce: jeśli masz komponent Badge, który wyświetla licznik, zmień {count && {count}} na {count > 0 ? {count} : null}, aby uniknąć wyświetlenia "0" na ekranie.
4. Zastosuj tę zasadę do wszystkich komponentów, które renderują wartości numeryczne lub inne falsy values, które mogą być mylące dla użytkownika.
5. Przetestuj komponenty z wartościami granicznymi (0, NaN, undefined, null), aby upewnić się, że renderowanie zachowuje się zgodnie z oczekiwaniami.