Условная отрисовка в React | OTUS

Условная отрисовка в React

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

На практике отрисовка по условию в React работает точно так же, как и условия работы в JavaScript. Вы можете использовать JavaScript-операторы, к примеру, if либо тернарный оператор для создания элементов, представляющих текущее состояние, а React обновит UI для соответствия этим элементам.

Давайте рассмотрим следующие 2 компонента:

1-1801-ff3a5f.png

А теперь давайте создадим компонент Greeting, который отрисует любой из вышеуказанных компонентов с учетом того, выполнил ли пользователь вход в систему:

2-1801-7b0981.png

В результате, зависимости от условия (в нашем случае -- в зависимости от значения свойства isLoggedIn) будет отрисовано то либо иное приветствие.

Посмотреть работу этого кода можно здесь. Для изменения условия достаточно изменить false на true.

По материалам https://ru.react.js.org/.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться