Условия в JSX на React

В предыдущих статьях этого раздела были рассмотрены примеры использования синтаксиса JSX для разработки приложений на React. Рекомендуем ознакомиться с ними: В этой статье продолжим знакомство с JSX. А именно с синтаксисом условий.

Условия if в JSX

Приведём пример вставки разных значений в зависимости от выполнения условий:
function App() {
   let text;
   const show = true;

   if (show) {
      text = 'Тише, мыши, кот на крыше!';
   } else {
      text = 'А котята ещё выше.';
   }

   return <div>
      {text}
   </div>;
}
В таком коде можно вынести в отдельные переменные не только сам текст, но и HTML теги, чтобы задействовать JSX. Получится так:
function App() {
   let text;
   const show = true;

   if (show) {
      text = <p>Тише, мыши, кот на крыше!</p>;
   } else {
      text = <p>А котята ещё выше.</p>;
   }

   return <div>
      {text}
   </div>;
}
Если требуется, то можно даже не делать никакой подстановки. То есть такой код тоже будет валидным:
function App() {
   let text;
   const show = false;

   if (show) {
      text = <p>Тише, мыши, кот на крыше!</p>;
   }

   return <div>
      {text}
   </div>;
}
Можно возвращать сами переменные. Для этого не требуется ставить фигурные скобки { ... }
function App() {
   let text = <p>Тише, мыши, кот на крыше!</p>;
   return text;
}

Сокращённые условия в JSX

В предыдущих статьях было сказано, что внутри фигурных скобок { ... } в JSX может быть выполнен почти любой JavaScript код. Но уточним, что далеко не весь, а только самый примитивный. К примеру, там нельзя поставить условие "if". Но подобные ограничения можно обойти.

Тернарный оператор в JSX

Вместо условия "if", которое нельзя использовать внутри фигурных скобок, можно использовать тернарный оператор. Попробуем с его помощью сократить предыдущий пример с "if" и "else":
function App() {
   const show = true;

   return <div>
      {show ? <p>Тише, мыш...</p> : <p>А котята...</p>}
   </div>;
}
Как можно видеть, в фигурных скобках можно работать не только с текстом, но и с тегами (лишь бы они были валидными, без ошибок).

Оператор && в JSX

Оператор "&&" позволяет вывести значение стоящего справа от него элеменета. Он используется, если нужно вывести значение по логическому условию и не выводить, если это условие является ложью. Вот так:
function App() {
   const show = true;

   return <div>
      {show && <p>Тише, мыши, кот на крыше!</p>}
   </div>;
}
Если константа "show" равна логическому true, то будет выводиться HTML код "<p>Тише, мыши, кот на крыше!</p>". Иначе ничего не будет выведено.

Для инвертирования этой операции используется оператор "!" (восклицательный знак), поставленный после открывающейся фигурной скобки:
function App() {
   const show = true;

   return <div>
      {!show && <p>Тише, мыши, кот на крыше!</p>}
   </div>;
}
Такой код ничего не выведет внутри <div> контейнера. Потому что константа "show" всегда равна "true", но оператор "!" инвертирует её значение.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Cмотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб

⇡ наверх