Условный рендеринг — один из наиболее часто используемых в React. По мере роста приложения и усложнения условные операторы рендеринга могут стать менее читабельными. В этой статье мы обсудим, как легко писать красивые условные операторы в React.

Общие методы условного рендеринга

Вот несколько методов, используемых при применении условного рендеринга в компонентах React:

С использованием &&

Это один из наиболее часто используемых методов условного рендеринга. Важно помнить, что этот метод следует использовать очень осторожно, так как он может привести к непредсказуемым ошибкам.

Использование операторов If/Else

Другой метод условного рендеринга в React — использование операторов if/else. Это может привести к сложному коду компонента, когда необходимо проверить несколько условий.

Использование тернарного оператора

Тернарный оператор — популярный метод, используемый для условного рендеринга в React. Проблема с использованием тернарного оператора заключается в том, что когда у вас есть несколько условий для проверки, это приводит к использованию вложенного тернарного оператора. Это может сделать код менее читаемым и сложным.

Написание чистых условных выражений

Представляем , простой и крошечный компонент React, который позволяет вам писать красивые условные операторы в React. Это позволит вам быстро написать читаемый код условного рендеринга в React. Если вам нужно проверить одно условие или ряд условий, вы можете сделать это с помощью .

Компонент работает аналогично операторам if/else и switch/case. Это позволяет вам проверить ряд условий для условного рендеринга в React.

В приведенном выше примере код отображает сообщение в зависимости от дней недели. Последнее условие всегда истинно, но оно будет отображаться только в том случае, если все вышеуказанные условия не выполняются. Он работает точно так же, как оператор по умолчанию switch/case .

Компонент принимает свойство isTrue , что позволяет вам реализовывать вложенные условия. Это означает, что все дочерние условия будут проверяться только в том случае, если условие, переданное в , оценивается как истинное.

Взгляните на этот крошечный компонент React здесь, на GitHub .

Создавайте компонуемые веб-приложения

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых средах, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.

Перенесите свою команду в Bit Cloud , чтобы совместно размещать и совместно работать над компонентами, а также ускорять, масштабировать и стандартизировать разработку в команде. Попробуйте компонуемые внешние интерфейсы с Design System или Micro Frontends или исследуйте компонуемые внутренние компоненты с серверными компонентами .

Попробуйте →

Учить больше