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

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

от ransom_homenick , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

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

от guillermo , 6 месяцев назад

@ransom_homenick 

Вот пример кода в React, который демонстрирует условный рендеринг:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React from 'react';

class MyComponent extends React.Component {
  render() {
    // Предположим, что у вас есть переменная isShown, которая определяет, должен ли быть отображен элемент
    const isShown = true;

    return (
      <div>
        {isShown ? <div>Элемент будет показан</div> : <div>Элемент будет скрыт</div>}
      </div>
    );
  }
}


В этом примере, если переменная isShown равна true, будет отрендерен элемент с текстом "Элемент будет показан". Если переменная isShown равна false, будет отрендерен элемент с текстом "Элемент будет скрыт".