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}'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://i.imgur.com/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>
  );
}

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

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

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

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/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>
  );
}