Вивчення React
Написання UI

JavaScript у JSX з фігурними дужками

JSX дозволяє вам писати HTML-подібну розмітку всередині файлу JavaScript, тримаючи логіку відображення та вміст в одному місці. Іноді вам потрібно додати трохи JavaScript логіки або звернутися до динамічних властивостей всередині цієї розмітки. У цій ситуації ви можете використовувати фігурні дужки у вашому JSX, щоб взаємодіяти з JavaScript.

Ви дізнаєтесь

  • Як передати стрічки з лапками
  • Як звернутися до змінної JavaScript всередині JSX за допомогою фігурних дужок
  • Як викликати функцію JavaScript всередині JSX за допомогою фігурних дужок
  • Як використовувати об’єкт JavaScript всередині JSX за допомогою фігурних дужок

Передача стрічок з лапками

Коли ви хочете передати атрибут-стрічку в JSX, ви поміщаєте його в одинарні або подвійні лапки:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Грегоріо І. Зара (Gregorio Y. Zara)"
    />
  );
}

Тут "https://i.imgur.com/7vQD0fPs.jpg" та "Грегоріо І. Зара (Gregorio Y. Zara)" передаються як рядки.

Але що, якщо ви хочете динамічно вказати src або текст alt? Ви можете використовувати значення з JavaScript, замінивши " та " на { та }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Грегоріо І. Зара (Gregorio Y. Zara)';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Зверніть увагу на відмінність між className="avatar", який вказує на ім’я CSS-класу "avatar", що робить зображення круглим, та src={avatar}, який читає значення змінної JavaScript, яка називається avatar. Це тому, що фігурні дужки дозволяють вам використовувати JavaScript прямо у розмітці!

Використання фігурних дужок: Вікно до світу JavaScript

JSX - це особливий спосіб написання JavaScript. Це означає, що в ньому можна використовувати JavaScript за допомогою фігурних дужок { }. У наведеному нижче прикладі спочатку оголошується ім’я для вченого, name, а потім вбудовується з фігурними дужками всередині тегу <h1>:

export default function TodoList() {
  const name = 'Грегоріо І. Зара (Gregorio Y. Zara)';
  return (
    <h1>Список справ {name}</h1>
  );
}

Спробуйте змінити значення name з 'Грегоріо І. Зара (Gregorio Y. Zara)' на 'Геді Ламар (Hedy Lamarr)'. Бачите, як змінюється заголовок списку?

Будь-який вираз JavaScript працюватиме всередині фігурних дужок, включаючи виклики функцій, наприклад formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'uk-UA',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>Список справ на {formatDate(today)}</h1>
  );
}

Де використовувати фігурні дужки

Фігурні дужки можна використовувати в JSX двома способами:

  1. Як текст безпосередньо всередині тегу JSX: <h1>Список справ {name}</h1> працює, але <{tag}>Список справ Грегоріо І. Зара (Gregorio Y. Zara)</{tag}> - ні.
  2. Як атрибути безпосередньо після знаку =: src={avatar} прочитає змінну avatar, але src="{avatar}" передасть рядок "{avatar}".

Використання “подвійних фігурних дужок”: CSS та інші об’єкти в JSX

Крім рядків, чисел та інших виразів JavaScript, ви навіть можете передавати об’єкти в JSX. Об’єкти також позначаються фігурними дужками, наприклад { name: "Геді Ламар (Hedy Lamarr)", inventions: 5 }. Отже, щоб передати JS об’єкт в JSX, ви повинні обгорнути його в іншу пару фігурних дужок: person={{ name: "Геді Ламар (Hedy Lamarr)", inventions: 5 }}.

Ви можете побачити це з вбудованими стилями CSS в JSX. React не вимагає вас використовувати вбудовані стилі (CSS-класи працюють добре для більшості випадків). Але коли вам потрібні вбудовані стилі, ви передаєте об’єкт атрибута style:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Покращити відеотелефон</li>
      <li>Підготувати лекції з авіаційних технологій</li>
      <li>Працювати над двигуном на спиртовому паливі</li>
    </ul>
  );
}

Спробуйте змінити значення backgroundColor та color.

Ви справді можете побачити об’єкт JavaScript всередині фігурних дужок, коли ви пишете його таким чином:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

Наступного разу, коли ви побачите {{ та }} в JSX, знайте, що це не більше, ніж об’єкт всередині фігурних дужок JSX!

Pitfall

Вбудовані властивості style записуються в camelCase. Наприклад, HTML <ul style="background-color: black"> буде записано як <ul style={{ backgroundColor: 'black' }}> в вашому компоненті.

Більше розваг з об’єктами JavaScript та фігурними дужками

Ви можете об’єднати кілька виразів у один об’єкт і посилатися на них у вашому JSX всередині фігурних дужок:

const person = {
  name: 'Грегоріо І. Зара (Gregorio Y. Zara)',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Задачі {person.name}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Грегоріо І. Зара (Gregorio Y. Zara)"
      />
      <ul>
        <li>Покращити відеотелефон</li>
        <li>Підготувати лекції з авіаційних технологій</li>
        <li>Працювати над двигуном на спиртовому паливі</li>
      </ul>
    </div>
  );
}

У цьому прикладі JavaScript об’єкт person містить рядок name та об’єкт theme:

const person = {
  name: 'Грегоріо І. Зара (Gregorio Y. Zara)',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Компонент може використовувати ці значення з person так:

<div style={person.theme}>
  <h1>{person.name}'s Справи</h1>

JSX є дуже мінімальною, як мова шаблонізації, оскільки вона дозволяє вам організовувати дані та логіку за допомогою JavaScript.

Recap

Тепер ви майже все знаєте про JSX:

  • Атрибути JSX всередині лапок передаються як рядки.
  • Фігурні дужки дозволяють вам використовувати логіку та змінні JavaScript у вашій розмітці.
  • Вони працюють всередині вмісту тегу JSX або безпосередньо після = в атрибутах.
  • {{ та }} - це не спеціальний синтаксис: це об’єкт JavaScript, який знаходиться всередині фігурних дужок JSX.

Try out some challenges

Challenge 1 of 3:
Виправте помилку

Цей код видає помилку Objects are not valid as a React child:

const person = {
  name: 'Грегоріо І. Зара (Gregorio Y. Zara)',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Задачі {person}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Грегоріо І. Зара (Gregorio Y. Zara)"
      />
      <ul>
        <li>Покращити відеотелефон</li>
        <li>Підготувати лекції з авіаційних технологій</li>
        <li>Працювати над двигуном на спиртовому паливі</li>
      </ul>
    </div>
  );
}

Ви можете знайти проблему?

PreviousНаписання розмітки з JSX
NextПередача пропсів до компонента