Условия в 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", но оператор "!" инвертирует её значение.