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="Грегорио И. Зара"
    />
  );
}

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

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

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

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

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

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

export default function TodoList() {
  const name = 'Грегорио И. Зара';
  return (
    <h1>Список дел {name}</h1>
  );
}

Попробуйте изменить значение переменной name с 'Грегорио И. Зара' на 'Хеди Ламарр'. Видите, как изменился заголовок списка?

Любое выражение 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}</h1> будет работать, но <{tag}>Список дел Грегорио И. Зара</{tag}> — нет.
  2. Как атрибуты, следующие непосредственно за знаком =: src={avatar} прочитает переменную avatar, но src="{avatar}" передаст строку "{avatar}".

Использование “двойных фигурных скобок”: CSS и другие объекты в JSX.

В дополнение к строкам, числам и другим выражениям JavaScript, вы можете передавать объекты в JSX. Объекты также обозначаются фигурными скобками { name: "Хеди Ламарр", inventions: 5 }. Поэтому, чтобы передать JS-объект в JSX, вы должны обернуть объект в ещё одни фигурные скобки: person={{ name: "Хеди Ламарр", 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'
  }
}>

The next time you see {{ and }} in JSX, know that it’s nothing more than an object inside the JSX curlies!

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

Pitfall

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

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

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

const person = {
  name: 'Грегорио И. Зара',
  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="Грегорио И. Зара"
      />
      <ul>
        <li>Улучшить видеотелефон</li>
        <li>Подготовить лекции по аэронавтике</li>
        <li>Работать над спиртовым двигателем</li>
      </ul>
    </div>
  );
}

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

const person = {
  name: 'Грегорио И. Зара',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Компонент может использовать эти значения из person вот так:

<div style={person.theme}>
  <h1>Список дел {person.name}</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: 'Грегорио И. Зара',
  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="Грегорио И. Зара"
      />
      <ul>
        <li>Улучшить видеотелефон</li>
        <li>Подготовить лекции по аэронавтике</li>
        <li>Работать над спиртовым двигателем</li>
      </ul>
    </div>
  );
}

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

PreviousWriting Markup with JSXNextPassing Props to a Component

How do you like these docs?