Умовний рендеринг

Ваші компоненти часто матимуть потребу відображати різні речі в залежності від різних умов. У React ви можете умовно рендерити JSX, використовуючи синтаксис JavaScript: оператори if, && та ? :.

You will learn

Як повертати різний JSX в залежності від умови
Як умовно включати або виключати частину JSX
Загальні скорочення умовного синтаксису, з якими ви зустрінетеся в кодових базах React

Умовне повернення JSX

Припустимо, у вас є компонент PackingList, який рендерить кілька компонентів Item, які можуть бути запаковані або ні:

Fork

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

Зверніть увагу, що деякі компоненти Item мають проп isPacked встановлений на true замість false. Ви хочете додати позначку (✅) до запакованих речей, якщо isPacked={true}.

Ви можете зробити це за допомогою оператора if/else ось так:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Якщо проп isPacked дорівнює true, цей код повертає інше JSX-дерево. З цією зміною, деякі елементи отримають позначку в кінці:

Fork

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

Спробуйте змінити що повертає цей код в обох випадках та подивіться, як змінюється результат!

Зверніть увагу на те, як ви створюєте розгалужену логіку з JavaScript if та return виразами. У React, потік контролю (так само як і умови, стани) обробляється за допомогою JavaScript.

Умовне повернення нічого за допомогою `null`

У певних ситуаціях, ви не хотітимете рендерити взагалі будь-що. Наприклад, скажімо, ви не хочете рендерити запаковані елементи взагалі. Але компонент повинен повертати щось. У цьому випадку ви можете повернути null:

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

Якщо isPacked дорівнює true, компонент нічого не поверне, тобто null. В іншому випадку, він поверне JSX для рендеру.

Fork

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

Повернення null з компонента не є поширеною практикою, оскільки це може застати зненацька розробника, який намагається його відобразити. Часто, ви умовно включатимете або виключатимете компонент в JSX батьківського компонента. Ось як це зробити!

Умовне включення JSX

У попередньому прикладі ви контролювали, яке JSX-дерево буде повернено компонентом. Ви вже могли помітити деяке дублювання у виводі рендеру:

<li className="item">{name} ✅</li>

дуже схоже на

<li className="item">{name}</li>

Обидві гілки умов повертають <li className="item">...</li>:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Хоча це дублювання не є шкідливим, воно може ускладнити підтримування вашого коду. Що, якщо ви захочете змінити className? Вам доведеться зробити це в двох місцях вашого коду! У такій ситуації ви могли б умовно включити трохи JSX, щоб зробити ваш код більш DRY.

Умовний (тернарний) оператор (`? :`)

JavaScript має компактний синтаксис для написання умовного виразу — умовний оператор або “тернарний оператор”.

Замість цього:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Ви можете написати ось так:

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

Це можна прочитати як “якщо isPacked є true, тоді (?) рендерити name + ' ✅', в іншому випадку (:) рендерити name”.

Deep Dive

Чи ці два приклади повністю еквівалентні?

Якщо у вас є досвід з об’єктно-орієнтованого програмування, ви можете припустити, що два приклади вище є трохи різними, оскільки один з них може створити дві різні “сутності” <li>. Але JSX-елементи не є “сутностями”, оскільки вони не містять жодного внутрішнього стану і не є реальними вузлами DOM. Це легкі описи, подібні до креслень. Таким чином, ці два приклади, насправді, є абсолютно еквівалентними. Збереження та скидання стану детально розповідає про те, як це працює.

Тепер, скажімо, ви хочете обгорнути текст елемента в інший HTML-тег, наприклад <del>, щоб його перекреслити. Ви можете додати ще більше нових рядків і дужок, щоб було легше використовувати вкладенний JSX в кожному з випадків:

Fork

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

Цей стиль добре працює для простих умов, але використовуйте його з розумом. Якщо ваші компоненти стають заплутаними через велику вкладену умовну розмітку, подумайте над “розпакуванням” дочірніх компонентів, щоб все виглядало охайніше. У React розмітка є частиною вашого коду, тому ви можете використовувати такі інструменти, як змінні та функції, щоб спростити складні вирази.

Логічний оператор AND (`&&`)

Ще одне поширене скорочення, з яким ви зіткнетеся — логічний оператор AND (&&) JavaScript. Всередині компонентів React він часто з’являється, коли ви хочете відрендерити деякий JSX, коли умова є true, або нічого не рендерити в іншому випадку. З && ви могли б умовно відрендерити позначку, лише якщо isPacked є true:

return (
  <li className="item">
    {name} {isPacked && '✅'}
  </li>
);

Ви можете читати це як “якщо isPacked, тоді (&&) відрендерити позначку, в іншому випадку нічого не рендерити”.

Ось він в дії:

Fork

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

JavaScript && вираз повертає значення своєї правої сторони (у нашому випадку, позначку) якщо ліва сторона (наша умова) true. Але якщо умова false, то весь вираз стає false. React розглядає false як “діру” в JSX дереві, так само як null або undefined, і не рендерить нічого на його місці.

Pitfall

Не ставте числа зліва від &&.

Щоб перевірити умову, JavaScript автоматично перетворює ліву сторону на булеве значення. Однак, якщо ліва сторона є 0, то весь вираз отримує це значення (0), і React з задоволенням відрендерить 0 замість нічого.

Наприклад, поширеною помилкою є написання коду типу messageCount && New messages. Легко припустити, що він нічого не рендерить, коли messageCount дорівнює 0, але насправді він рендерить сам 0!

Щоб виправити це, зробіть ліву сторону булевою: messageCount > 0 && New messages.

Умовне присвоєння JSX змінній

Коли скорочення заважають писати звичайний код, спробуйте використати оператор if та змінну. Ви можете переприсвоювати змінні, визначені за допомогою let, тому почніть з задання вмісту за замовчуванням, який ви хочете відобразити, name:

let itemContent = name;

Використовуйте оператор if для переприсвоєння JSX-виразу itemContent, якщо isPacked дорівнює true:

if (isPacked) {
  itemContent = name + " ✅";
}

Фігурні дужки відкривають “вікно в JavaScript”. Вбудуйте змінну з фігурними дужками в повернене JSX-дерево, вкладаючи раніше обчислений вираз всередині JSX:

<li className="item">
  {itemContent}
</li>

Цей стиль є найбільш багатослівним, але він також найбільш гнучкий. Ось як він працює на практиці:

Fork

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✅";
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

Як і раніше, це працює не тільки для тексту, але й для довільного JSX:

Fork

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = (
      <del>
        {name + " ✅"}
      </del>
    );
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

Якщо ви не знайомі з JavaScript, то ця різноманітність стилів може спершу здатися вам занадто складною. Однак, їх знання допоможе вам читати та писати будь-який код JavaScript — і не тільки компоненти React! Виберіть той, який вам більше подобається для початку, а потім зверніться до цього довідника знову, якщо ви забудете, як працюють інші.

Recap

У React ви керуєте розгалуженою логікою за допомогою JavaScript.
Ви можете повернути JSX-вираз умовно за допомогою оператора if.
Ви можете умовно зберегти деякий JSX у змінну, а потім включити його в інший JSX, використовуючи фігурні дужки.
У JSX, {cond ? <A /> : } означає “якщо cond, відобразити <A />, інакше ”.
У JSX, {cond && <A />} означає “якщо cond, відобразити <A />, інакше нічого”.
Ці скорочення є поширеними, але ви не повинні їх використовувати, якщо вам більше подобається простий if.

Try out some challenges

Challenge 1 of 3:
Показати значок для незавершених елементів за допомогою `? :`

Використовуйте умовний оператор (cond ? a : b) для відображення ❌, якщо isPacked не дорівнює true.

Fork

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд(Sally Ride)</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Космічний костюм" 
        />
        <Item 
          isPacked={true} 
          name="Шолом із золотим листям" 
        />
        <Item 
          isPacked={false} 
          name="Фото Тем О'Шонессі(Tam O'Shaughnessy)" 
        />
      </ul>
    </section>
  );
}

PreviousПередача пропсів до компонента

NextРендеринг списків

Умовний рендеринг

You will learn

Умовне повернення JSX

Умовне повернення нічого за допомогою null

Умовне включення JSX

Умовний (тернарний) оператор (? :)

Deep Dive

Чи ці два приклади повністю еквівалентні?

Логічний оператор AND (&&)

Pitfall

Умовне присвоєння JSX змінній

Recap

Try out some challenges

Challenge 1 of 3: Показати значок для незавершених елементів за допомогою ? :

Умовне повернення нічого за допомогою `null`

Умовний (тернарний) оператор (`? :`)

Логічний оператор AND (`&&`)

Challenge 1 of 3:
Показати значок для незавершених елементів за допомогою `? :`