Learn React
Describing the UI

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

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

You will learn

  • Як передати стрічки з лапками
  • Як звернутися до змінної 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> ); }

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

PreviousWriting Markup with JSX
NextPassing Props to a Component

How do you like these docs?