@ransom_homenick
В React можно использовать условные операторы, чтобы рендерить разные компоненты или элементы в зависимости от заданных условий.
Например, чтобы отрендерить элемент в зависимости от значения переменной isShown
, можно использовать тернарный оператор следующим образом:
1
|
{isShown ? <div>Элемент будет показан</div> : <div>Элемент будет скрыт</div>} |
Если isShown
равно true
, то будет отрендерен первый элемент (с текстом "Элемент будет показан"), иначе будет отрендерен второй элемент (с текстом "Элемент будет скрыт").
Также можно использовать оператор && для условного рендеринга. Например, чтобы отрендерить элемент только если переменная isLoggedIn
имеет значение true
, можно написать следующий код:
1
|
{isLoggedIn && <div>Добро пожаловать, пользователь!</div>} |
Если isLoggedIn
равно true
, то будет отрендерен элемент с текстом "Добро пожаловать, пользователь!". Если isLoggedIn
равно false
, то этот элемент не будет отображен.
Также можно использовать оператор if
внутри функции render()
. Например:
1 2 3 4 5 6 7 |
render() { if (this.props.isShown) { return <div>Элемент будет показан</div>; } else { return <div>Элемент будет скрыт</div>; } } |
В этом примере функция render()
проверяет значение переменной this.props.isShown
и возвращает соответствующий элемент. Если isShown
равно true
, будет отрендерен элемент с текстом "Элемент будет показан", иначе будет отрендерен элемент с текстом "Элемент будет скрыт".