React Условный рендеринг компонентов

В React компоненты можно рендерить, основываясь на определенных условиях.

Существует несколько способов реализации условного рендеринга.

Способ №1: оператор if

Для выбора нужного компонента для вывода мы можем использовать оператор JavaScript if.

Пример

Создадим два простых компонента:


function MissedGoal() {
  return <h1>НЕ ПОПАЛ!</h1>;
}

function MadeGoal() {
  return <h1>ГОЛ!</h1>;
}

Затем создадим третий компонент, который решает, какой из двух предыдущих компонентов выводить, исходя из условия:


function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal />;
  }
  return <MissedGoal />;
}

createRoot(document.getElementById('root')).render(
  <Goal isGoal={false} />
);

Попробуйте поменять значение атрибута isGoal на true:


createRoot(document.getElementById('root')).render(
  <Goal isGoal={true} />
);

Способ №2: Логический оператор &&

Еще одним способом является использование оператора &&. Если условие слева истинно, тогда выражение справа будет выведено.

В следующем примере заголовок будет показан только в том случае, если свойство props.brand не пустое.

Пример

Правая часть от оператора && будет выведена, только если левая будет равна истине:


function Car(props) {
  return (
    <>
      {props.brand && <h1>Мой автомобиль — {props.brand}!</h1>}
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);

Если свойство props.brand соответствует значению true, выражение после && будет отрендерено.

Проверьте, что произойдет, если оставить свойство brand пустым.

Пример


createRoot(document.getElementById('root')).render(
  <Car />
);

Способ №3: Тернарный оператор

Тернарный оператор — ещё один способ условного рендеринга элементов:


условие ? true : false

Вернемся к примеру с голом.

Пример

Возвращаем компонент <MadeGoal>, если isGoal === true, иначе возвращаем компонент <MissedGoal>:


function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      {isGoal ? <MadeGoal /> : <MissedGoal />}
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Goal isGoal={false} />
);

Подробнее читайте в разделе, посвященном тернарному оператору.