React JSX Выражения

Одной из самых мощных возможностей JSX является способность встраивать JavaScript-выражения прямо в разметку.

Выражения

Любое правильное JavaScript-выражение можно вставить в JSX, обернув его в фигурные скобки { }.

React вычислит это выражение и отобразит результат в DOM.

Пример

Выполняем выражение 218 * 1.36:


function Car() {
  return (
    <>
      <h1>Моя машина</h1>
      <p>Её мощность равна {218 * 1.36} лошадиных сил</p>
    </>
  );
}

Переменные

Переменные также являются допустимыми выражениями. Вы можете вставлять переменные в JSX, окружив их фигурными скобками { }.

Пример

Использование переменной внутри JSX:


function Car() {
  const hp = 218 * 1.36;
  return (
    <>
      <h1>Моя машина</h1>
      <p>Её мощность равна {hp} лошадиных сил</p>
    </>
  );
}

Вызовы функций

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

Пример

Использование функции внутри JSX:


function kwtohp(kw) {
  return kw * 1.36;
}

function Car() {
  return (
    <>
      <h1>Моя машина</h1>
      <p>Её мощность равна {kwtohp(218)} лошадиных сил</p>
    </>
  );
}

Свойства объектов

Свойства объектов можно извлекать прямо внутри JSX.

Пример

Ссылка на свойства объекта внутри JSX:


function Car() {
  const myobj = {
    name: "Fiat",
    model: "500",
    color: "белый"
  };
  return (
    <>
      <h1>Моя машина — это {myobj.color} {myobj.name} {myobj.model}</h1>
    </>
  );
}

Таким образом, JSX позволяет удобно и естественно объединять JavaScript и HTML-подобный синтаксис, что делает написание и чтение компонентов намного удобнее и эффективнее.