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

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

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

export default function Avatar() {  return (    <img      className="avatar"      src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"      alt="Gregorio Y. Zara"    />  );}

Здесь 'https://react.dev/images/docs/scientists/7vQD0fPs.jpg' и "Gregorio Y. Zara' передаются в виде строк.

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

export default function Avatar() {  const avatar = 'https://react.dev/images/docs/scientists/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}'s To Do List</h1>  );}

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

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

const today = new Date();function formatDate(date) {  return new Intl.DateTimeFormat(    'en-US',    { weekday: 'long' }  ).format(date);}export default function TodoList() {  return (    <h1>To Do List for {formatDate(today)}</h1>  );}

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

Внутри 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:

export default function TodoList() {  return (    <ul style={{      backgroundColor: 'black',      color: 'pink'    }}>      <li>Improve the videophone</li>      <li>Prepare aeronautics lectures</li>      <li>Work on the alcohol-fuelled engine</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}'s Todos</h1>      <img        className="avatar"        src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"        alt="Gregorio Y. Zara"      />      <ul>        <li>Improve the videophone</li>        <li>Prepare aeronautics lectures</li>        <li>Work on the alcohol-fuelled engine</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}</h1>

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

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

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