Условный рендеринг в React

Что такое условный рендеринг?

Условный рендеринг (conditional rendering) означает отображение элементов в пользовательском интерфейсе только в том случае, если выполняется определенное условие, в противном случае элементы скроются.

Условные выражения if/else

Давайте рассмотрим условные выражения if/else в JavaScript.

let num = 2

if (num === 2) {
    console.log('the given number is 2')
} else {
    console.log('the give number is not 2')
}

В приведенном выше коде мы инициализировали переменную значением 2, а затем использовали условие if/else для логирования сообщения на основе предоставленного числа. Давайте реализуем условие if/else в ReactJs.

function App(props) {
   if (props.num === 2) {
       return <p>The given number is 2</p>
   } else {
       return <p>The given number is not  2</p>
   }
}

<App  num={2} />

В компонент App мы передали 2 в проп num.

Тернарный оператор

Мы можем сделать код компонента приложения короче с помощью тернарного оператора.

function App(props){
  return  (
    {props.num === 2
      ? <p>The given number is 2</p>
      : <p>The given number is not 2</p>
    }
  )
}

<App num={2} />

Здесь мы обернули наш код фигурными скобками, потому что в JSX нам нужно использовать фигурные скобки для выражений JavaScript.

Логический оператор && (и)

В JavaScript логический оператор && используется для вычисления выражения, если данное условие истинно.

true && expression // => expression

false && expression // => false

Использование логического оператора “и” (&&) в React.

function Search(props) {
  return (
    <div>
      <h1>Search</h1>
      <button>Search</button>

      {props.searchResults > 0 && <ul>search results</ul>}
    </div>
  )
}

В компоненте Search мы использовали оператор && для рендеринга элемента ul только в том случае, если props.results больше 0.

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

Брейкпоинт	id	Размер экрана
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Добавим эти брейкпоинты в файл констант размеров экрана.

// const-breakpoints.js
export const SCREEN_SM = 576;
export const SCREEN_MD = 768;
export const SCREEN_LG = 992;
export const SCREEN_XL = 1200;
export const SCREEN_XXL = 1400;

useResize будет возвращать ширину экрана, а также индикаторы достижения брейкпоинтов. Подпишемся на событие resize из window. Значение ширины экрана будем читать из поля innerWidth.

// use-resize.js
import { useState, useEffect } from 'react';
import {
  SCREEN_SM, SCREEN_MD, SCREEN_LG, SCREEN_XL, SCREEN_XXL,
} from './const-breakpoints';

export const useResize = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = (event) => {
      setWidth(event.target.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return {
    width,
    isScreenSm: width >= SCREEN_SM,
    isScreenMd: width >= SCREEN_MD,
    isScreenLg: width >= SCREEN_LG,
    isScreenXl: width >= SCREEN_XL,
    isScreenXxl: width >= SCREEN_XXL,
  };
};

Пример работы

При достижении ширины экрана 799px, флаги isScreenSm и isScreenMd будут иметь значения true. Исходный код