Разработчики, которые приходят на React с шаблонных языков, таких как Handlebars, часто удивляются, что JSX не имеет встроенного условного синтаксиса.
По-сути, JSX - это просто JavaScript, и сегодня я расскажу о 5 способах использования JS для условного рендера в React компонентах.
1️⃣ Переменные для компонентов
Мы можем записать JSX-компонент в переменную и затем отрисовать эту переменную. Можно использовать 'if-else' или 'switch'.
Изначально, я в основном использовал данный способ для условного рендеринга, потому что мне нравилось, что он сохранял JSX более "чистым".
2️⃣ Встроенный логический оператор &&
Это работает, потому что фигурные скобки ({}) в JSX принимают любое выражение JS и выполняют его. Когда условие ложно, React ничего не отображает. Когда условие истинно, то React отображает нужные компоненты.
3️⃣ Встроенный тернарный оператор
Данный оператор позволяет рендерить компоненты как для "истинных", так и для "ложных" случаев.
Если в "истинном" случае отображается большое количество компонентов, то могут быть трудности с тем, чтобы понять, где начинается "ложный" случай. Однако, правильное форматирование делает код более читаемым.
4️⃣ Отрисовка более раннего компонента
Вместо условного рендеринга компонента, вы можете задать самому компоненту решить, следует ли ему рендерить содержимое.
Это перемещает условный рендеринг в одно место, опять же, упрощая читаемость кода.
5️⃣ Вспомогательная функция
Когда для вычисления условия требуется несколько переменных или много разных дочерних компонентов отрисовываются, исходя из разных условий, мы можем переместить родительский компонент во вспомогательную функцию, чтобы оставить всю логику в одном месте.
Вы даже можете сделать встроенную функцию, используя IIFE, но я не рекомендую.
Итого
Какой из вышеперечисленных способов лучше всего использовать? Это всегда зависит от обстоятельств, но, в целом, я советую придерживаться следующего шаблона:
Если только одно условие - встроенный логический оператор &&;
Если несколько истинных или ложных условий - встроенный тернарный оператор;
Множественные условия - переменные для компонентов или вспомогательная функция.
Спасибо за прочтение! Если было полезно, ставьте лайк и пишите комментарий!