Как отрендерить исходя из условия в react js?

Пользователь

от ransom_homenick , в категории: JavaScript , 2 месяца назад

Как отрендерить исходя из условия в react js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от johnpaul.blick , месяц назад

@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, будет отрендерен элемент с текстом "Элемент будет показан", иначе будет отрендерен элемент с текстом "Элемент будет скрыт".