Как вы уже знаете, внутри фигурных скобок можно выполнять JavaScript код. На самом деле этот код может быть не любым, а только самым простым.
В частности, условия if там применять нельзя. Взамен следует пользоваться сокращенными вариантами условий. Давайте разберемся с ними.
Тернарный оператор
Давайте в зависимости от значения константы show выведем один или другой текст. Используем для этого тернарный оператор:
function App() {
const show = true;
return <div>
{show ? 'text1' : 'text2'}
</div>;
}
Можно работать не только с текстами, но и с тегами:
function App() {
const show = true;
return <div>
{show ? <p>text1</p> : <p>text2</p>}
</div>;
}
Дан следующий код:
function App() {
const age = 19;
return <div>
</div>;
}
Если в age записано больше 18 лет, то в тексте тега div покажите пользователю абзац с одним текстом, а если меньше - то с другим.
Оператор &&
Нам может понадобится выполнить вставку текста, если условие истинно, и ничего не делать, если ложно. Это делается с помощью оператора &&.
Давайте посмотрим его работу на примере.
В следующем коде, если в show будет true, то вставиться абзац с текстом, а если будет false, то ничего не вставится:
function App() {
const show = true;
return <div>
{show && <p>text</p>}
</div>;
}
Дан следующий код:
function App() {
const isAuth = true;
return <div>
<p>вы авторизованы</p>
</div>;
}
Сделайте так, чтобы приведенный абзац с текстом показывался только если в isAuth записано true.
Инвертирование
Может быть и обратная ситуация: нужно выполнить вставку текста, если условие ложно, и ничего не делать, если истинно. Для этого нужно выполнить инвертирования константы с помощью оператора !.
В следующем примере, если в hide будет false, то вставиться абзац с текстом:
function App() {
const hide = false;
return <div>
{!hide && <p>text</p>}
</div>;
}
Дан следующий код:
function App() {
const isAuth = false;
return <div>
<p>пожалуйста, авторизуйтесь</p>
</div>;
}
Сделайте так, чтобы приведенный абзац с текстом показывался только если в isAuth записано false.