Как реализовать условный рендеринг в React.js (с примерами)

Условный рендеринг — полезный способ улучшить ваше приложение. Вот несколько способов его использования.

Условный рендеринг означает изменение поведения приложения в зависимости от его состояния. Например, вы можете изменить приветственное сообщение вашего приложения React на темное ночью. Таким образом, в зависимости от времени суток у вас будет другое сообщение на дисплее.

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

Способы реализации условного рендеринга

Чтобы следовать этим примерам, вам необходимо иметь базовое представление о том, как работает React. Если у вас возникли трудности в этом случае, не волнуйтесь — у нас есть полезное руководство для начинающих по React.js.

Использование условных операторов

Как и в JavaScript, вы можете использовать условные операторы, например if…else, для создания элементов при выполнении определенных условий.

Например, вы можете отобразить указанный элемент в блоке if, когда условие выполнено, и отобразить другой элемент в блоке else, если условие не выполнено.

Рассмотрим следующий пример, в котором отображается кнопка входа или выхода из системы в зависимости от статуса входа пользователя.

function Dashboard(props) {
  const { isLoggedIn } = props
  if(isLoggedIn){
    return <button>Logout</button>
  } else{
    return <button>Login</button>
  }
}

Эта функция отображает другую кнопку в зависимости от значения isLoggedIn, переданного в качестве свойства.

Альтернативно вы можете использовать тернарный оператор. Тернарный оператор принимает условие, за которым следует код для выполнения, если условие правдиво, а затем код для выполнения, если условие ложно.

Перепишите приведенную выше функцию как:

function Dashboard(props) {
  const { isLoggedIn } = props
  return (
    <>
      {isLogged?<button>Logout</Logout>:<button>Login</button>)
    </>
  )
}

Тернарный оператор делает функцию более понятной и простой для чтения по сравнению с оператором if…else .

Объявление переменных элемента

Переменные элемента — это переменные, которые могут содержать элементы JSX и отображаться при необходимости в приложении React.

Вы можете использовать переменные элемента для визуализации только определенной части компонента, когда ваше приложение соответствует указанному условию.

Например, если вы хотите отображать только кнопку входа в систему, когда пользователь не вошел в систему, и кнопку выхода только тогда, когда он вошел в систему, вы можете использовать переменные элемента.

function LoginBtn(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}
function LogoutBtn(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
function Dashboard() {
  const [loggedIn, setLoggedIn] = useState(true)
  const handleLogin = () => {
    setLoggedIn(true)
  }
  const handleLogout = () => {
    setLoggedIn(false)
  }
  let button;
  if (loggedIn) {
        button = <LogoutBtn onClick={handleLogout}/>
  } else {
    button = <LoginBtn onClick={handleLogin}/>
  }
    return (
      <>
        {loggedIn}
      </>
    )
}

В приведенном выше коде сначала создаются компоненты кнопок входа и выхода, а затем определяется компонент для отображения каждого из них в разных условиях.

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

Теперь, в зависимости от состояния, визуализируйте компонент или .

Если пользователь не вошел в систему, отобразите компонент , в противном случае отобразите компонент e . Две функции-дескрипторы изменяют состояние входа в систему при нажатии соответствующей кнопки.

Использование логических операторов

Вы можете использовать логический оператор && для условной визуализации элемента. Здесь элемент отображается только в том случае, если условие оценивается как true, в противном случае он игнорируется.

Если вы хотите уведомить пользователя о количестве полученных уведомлений только в том случае, если у него есть одно или несколько уведомлений, вы можете использовать следующее.

function ShowNotifications(props) {
  const { notifications } = props
  return (
    <>
    {notifications.length > 0 &&
        <p>
          You have {notifications.length} notifications.
        </p>
      }
    </>
  )
}

Затем, чтобы отобразить элемент, если логическое выражение && дает ложное значение, добавьте логическое || в цепочку || оператор.

Следующая функция отображает сообщение «У вас нет уведомлений», если никакие уведомления не передаются в качестве реквизита.

function ShowNotifications(props) {
  const { notifications } = props
  return (
    <>
    {notifications.length > 0 &&
        <p>
          You have {notifications.length} notifications.
        </p> || <p>You have no notifications</p>
      }
    </>
  )
}

Запретить рендеринг компонента

Чтобы скрыть компонент, даже если он был отображен другим компонентом, верните значение null вместо его вывода.

Рассмотрим следующий компонент, который отображает кнопку с предупреждением только в том случае, если предупреждающее сообщение передается в качестве реквизита.

function Warning (props) {
  const {warningMessage} = props
  if (!warningMessage) {
    return null
  }
  return (
    <>
      <button>Warning</button>
    </>
  )
}

Теперь, если вы передадите «warningMessage» компоненту , будет отображена кнопка предупреждения. Однако если вы этого не сделаете, вернет значение null и кнопка не будет отображаться.

<Warning warningMessage="Warning message"/> // the warning button is rendered
<Warning/> // the warning button is not rendered

Примеры условного рендеринга в реальных приложениях React

Используйте условный рендеринг для выполнения различных задач в вашем приложении. Некоторые из них включают в себя рендеринг данных API только тогда, когда они доступны, и отображение сообщения об ошибке только при ее наличии.

Рендеринг данных, полученных из API, в React

Получение данных из API может занять некоторое время. Поэтому сначала проверьте, доступен ли он, прежде чем использовать его в своем приложении, иначе React выдаст ошибку, если он недоступен.

Следующая функция показывает, как можно условно визуализировать данные, возвращаемые API.

function FetchData() {
  const [data, setData] = useState(null);
  const apiURL = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY";
  // Fetch data from API using Axios
  const fetchData = async () => {
    const response = await axios.get(apiURL)
    // Update state with the data
    setData(response.data) 
  }
  return (
    <>
      <h1>Astronomy picture of the day</h1>
      {
        data && 
        <p>{data.title}</p>
        <p>{data.explanation}</p>
      }
    </>
  )
}

В приведенной выше функции получите данные из API NASA Apod с помощью Axios. Когда API возвращает ответ, обновите состояние и используйте логический оператор &&, чтобы отображать данные только тогда, когда они доступны.

Отображение сообщений об ошибках

В случаях, когда вы хотите отображать ошибку только в том случае, если она существует, используйте условный рендеринг.

Например, если вы создаете форму и хотите отображать сообщение об ошибке, если пользователь ввел неправильный формат электронной почты, обновите состояние, указав сообщение об ошибке, и используйте оператор if для его отображения.

function showError() {
  const [error, setError] = useState(null)
    return (
      <>
        {
          if (error) {
            <p>An error occurred: {error}</p>
          }
        }
      </>
    )
}

Выбор того, что использовать в вашем приложении React

В этом уроке вы узнали о нескольких способах условной визуализации элементов JSX.

Все рассмотренные методы дают одинаковые результаты. Сделайте выбор, что использовать, в зависимости от варианта использования и уровня читабельности, которого вы хотите достичь.