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

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