Отрисовка по условию: переменные элементы | OTUS

Курсы

Программирование
PHP Developer. Basic
-20%
Специализация PHP Developer
-25%
C# Developer. Professional
-20%
Team Lead
-20%
Symfony Framework
-20%
PHP Developer. Professional
-20%
C# ASP.NET Core разработчик
-20%
Специализация Python Developer
-25%
Разработчик на Spring Framework
-20%
Kotlin Backend Developer
-20%
Архитектура и шаблоны проектирования
-20%
Highload Architect Java Developer. Professional Android Developer. Basic Специализация Android-разработчик Unity Game Developer. Professional Специализация C++ Developer Cloud Solution Architecture Java Developer. Basic JavaScript Developer. Professional NoSQL Rust Developer Framework Laravel Unity Game Developer. Basic Node.js Developer JavaScript Developer. Basic C# Developer. Basic Специализация C# Unreal Engine Technical Game Design Kotlin Developer. Basic
Специализации Курсы в разработке Подготовительные курсы Подписка
+7 499 938-92-02

Отрисовка по условию: переменные элементы

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

Ниже -- 2 новых компонента, которые представляют кнопки для авторизации и выхода:

1-1801-7c776a.png

Теперь давайте создадим компонент с состоянием и с именем LoginControl. Данный компонент станет отрисовывать или <LoginButton />, или <LogoutButton />, что зависит от текущего состояния. Вдобавок ко всему, созданный компонент отрисует <Greeting /> из предыдущего примера.

Итак, смотрим реализацию:

2-1801-b3e82f.png

Итак, объявление переменной вкупе с применением оператора if — хороший способ отрисовать компонент по условию. Однако в некоторых случаях можно применять и более короткий синтаксис. Но об этом читайте в наших следующих статьях.

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

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

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

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

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