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 двома способами:
- Як текст безпосередньо всередині тегу JSX:
<h1>Список справ {name}</h1>
працює, але<{tag}>Список справ Грегоріо І. Зара (Gregorio Y. Zara)</{tag}>
- ні. - Як атрибути безпосередньо після знаку
=
: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!
Більше розваг з об’єктами 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.
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> ); }
Ви можете знайти проблему?