0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: react, условная отрисовка</p>
1
<p>Теги: react, условная отрисовка</p>
2
<p>В React есть возможность создавать отдельные компоненты, инкапсулирующие нужное вам поведение. При этом вы можете отрисовать лишь некоторые из созданных компонентов с учетом состояния вашего приложения.</p>
2
<p>В React есть возможность создавать отдельные компоненты, инкапсулирующие нужное вам поведение. При этом вы можете отрисовать лишь некоторые из созданных компонентов с учетом состояния вашего приложения.</p>
3
<p>На практике отрисовка по условию в<strong>React</strong>работает точно так же, как и условия работы в JavaScript. Вы можете использовать JavaScript-операторы, к примеру, if либо тернарный оператор для создания элементов, представляющих текущее состояние, а React обновит UI для соответствия этим элементам.</p>
3
<p>На практике отрисовка по условию в<strong>React</strong>работает точно так же, как и условия работы в JavaScript. Вы можете использовать JavaScript-операторы, к примеру, if либо тернарный оператор для создания элементов, представляющих текущее состояние, а React обновит UI для соответствия этим элементам.</p>
4
<p>Давайте рассмотрим следующие 2 компонента:</p>
4
<p>Давайте рассмотрим следующие 2 компонента:</p>
5
<p>А теперь давайте создадим компонент<strong>Greeting</strong>, который отрисует любой из вышеуказанных компонентов с учетом того, выполнил ли пользователь вход в систему:</p>
5
<p>А теперь давайте создадим компонент<strong>Greeting</strong>, который отрисует любой из вышеуказанных компонентов с учетом того, выполнил ли пользователь вход в систему:</p>
6
<p>В результате, зависимости от условия (в нашем случае -- в зависимости от значения свойства<strong>isLoggedIn</strong>) будет отрисовано то либо иное приветствие.</p>
6
<p>В результате, зависимости от условия (в нашем случае -- в зависимости от значения свойства<strong>isLoggedIn</strong>) будет отрисовано то либо иное приветствие.</p>
7
<p>Посмотреть работу этого кода можно<a>здесь</a>. Для изменения условия достаточно изменить false на true.</p>
7
<p>Посмотреть работу этого кода можно<a>здесь</a>. Для изменения условия достаточно изменить false на true.</p>
8
<p><em>По материалам https://ru.react.js.org/.</em></p>
8
<p><em>По материалам https://ru.react.js.org/.</em></p>
9
9