JavaScript в JSX с фигурными скобками

JSX позволяет писать HTML-подобную разметку внутри JavaScript-файла, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного JavaScript-логики или сослаться на динамическое свойство внутри этой разметки. В такой ситуации вы можете использовать фигурные скобки в JSX, чтобы открыть окно в JavaScript.

Передача строк в кавычках

Когда вы хотите передать строковый атрибут в JSX, вы заключаете его в одинарные или двойные кавычки:

Здесь"https://i.imgur.com/7vQD0fPs.jpg" и "Gregorio Y. Zara"передаются как строки.

Но что, если вы хотите динамически указать текст дляsrcилиalt? Вы можетеиспользовать значение из JavaScript, заменив" и "на{ и }:

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

Использование фигурных скобок: окно в мир JavaScript

JSX — это особый способ написания JavaScript. Это означает, что внутри него можно использовать JavaScript — с помощью фигурных скобок{ }. В примере ниже сначала объявляется имя учёного,name, затем оно встраивается с помощью фигурных скобок внутрь<h1>:

Попробуйте изменить значениеname с 'Gregorio Y. Zara'на'Hedy Lamarr'. Видите, как меняется заголовок списка?

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

Где использовать фигурные скобки

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

1. Как текстнепосредственно внутри JSX-тега:<h1>{name}'s To Do List</h1>работает, а<{tag}>Gregorio Y. Zara's To Do List</{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:

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

Вы действительно можете увидеть JavaScript-объект внутри фигурных скобок, когда пишете его вот так:

В следующий раз, когда вы увидите{{ и }}в JSX, знайте, что это не что иное, как объект внутри JSX-фигурных скобок!

Больше интересного с JavaScript-объектами и фигурными скобками

Вы можете поместить несколько выражений в один объект и ссылаться на них в вашем JSX внутри фигурных скобок:

В этом примере JavaScript-объектpersonсодержит строкуnameи объектtheme:

Компонент может использовать эти значения изpersonследующим образом:

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

Итоги

Теперь вы знаете почти всё о JSX:

• Атрибуты JSX внутри кавычек передаются как строки.
• Фигурные скобки позволяют вносить JavaScript-логику и переменные в вашу разметку.
• Они работают внутри содержимого JSX-тега или сразу после=в атрибутах.
• {{ и }}— это не специальный синтаксис: это JavaScript-объект, помещённый внутрь JSX-фигурных скобок.