Как использовать условные операторы в React.js?

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

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

Как использовать условные операторы в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от alisa.bahringer , год назад

@bart 

В React.js условные операторы можно использовать для отображения компонентов или элементов в зависимости от определенных условий.


Наиболее распространенный способ использования условных операторов в React.js - это использование тернарного оператора. Тернарный оператор позволяет легко изменять содержимое JSX в зависимости от условий. Например, вот пример использования тернарного оператора для отображения компонента в зависимости от значения свойства isLoggedIn:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function App(props) {
  const { isLoggedIn } = props;

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}


В этом примере компонент App отображает p элемент, в зависимости от значения свойства isLoggedIn.


Также можно использовать оператор if...else в JSX. В этом случае нужно использовать блок {} для оборачивания оператора if и его тела. Например:

1
2
3
4
5
6
7
8
9
function App(props) {
  const { isLoggedIn } = props;

  if (isLoggedIn) {
    return <p>Welcome, user!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}


В этом примере компонент App отображает p элемент в зависимости от значения свойства isLoggedIn.


Наконец, можно использовать оператор switch в JSX для отображения различных компонентов в зависимости от значения определенного свойства или переменной. В этом случае нужно использовать блок {} для оборачивания оператора switch и его тела. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function App(props) {
  const { page } = props;

  switch (page) {
    case 'home':
      return <HomePage />;
    case 'about':
      return <AboutPage />;
    case 'contact':
      return <ContactPage />;
    default:
      return <NotFoundPage />;
  }
}


В этом примере компонент App отображает различные компоненты в зависимости от значения свойства page.