Выражения в JSX

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

Встраивание выражений

Любое корректное выражение JavaScript может быть помещено внутрь JSX. Это могут быть:

  • переменные
  • арифметические операции
  • вызовы функций
  • тернарные операторы

Пример использования переменной:

import { h } from 'preact';

const name = 'Preact';
const element = <h1>Привет, {name}!</h1>;

В данном случае {name} подставит значение переменной name в DOM.

Арифметические выражения

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

const a = 5;
const b = 10;
const element = <p>{a} + {b} = {a + b}</p>;

Здесь результат выражения {a + b} вычисляется на этапе рендеринга.

Тернарные выражения

Условные конструкции в JSX реализуются через тернарный оператор, поскольку обычный if нельзя использовать внутри фигурных скобок:

const isLoggedIn = true;
const element = <div>{isLoggedIn ? 'Добро пожаловать' : 'Пожалуйста, войдите'}</div>;

Тернарный оператор позволяет менять содержимое элементов динамически в зависимости от состояния приложения.

Логические выражения

Для условного отображения элементов часто применяются логические выражения:

const notifications = 3;
const element = <div>{notifications > 0 && <span>У вас {notifications} новых уведомлений</span>}</div>;

Выражение notifications > 0 && <span>...</span> рендерит <span> только если условие истинно.

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

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

function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: 'Иван', lastName: 'Иванов' };
const element = <h1>Привет, {formatName(user)}!</h1>;

Функция formatName вызывается при рендеринге, а возвращаемое значение вставляется в DOM.

Вложенные выражения

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

const a = 5;
const b = 10;
const showSum = true;

const element = (
  <div>
    {showSum ? <p>{a} + {b} = {a + b}</p> : <p>Сумма скрыта</p>}
  </div>
);

Такая конструкция позволяет строить сложные логические структуры прямо внутри JSX без необходимости писать отдельные функции рендера.

Особенности рендеринга значений

  • null, undefined и false не рендерятся в DOM.
  • Числа и строки автоматически преобразуются в текстовые узлы.
  • Массивы элементов могут быть возвращены напрямую, что полезно для динамических списков:
const items = ['Яблоко', 'Банан', 'Вишня'];
const element = (
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
);

Важность ключей в списках

При использовании массивов элементов для динамического рендеринга необходимо задавать атрибут key для каждого элемента:

const items = ['Яблоко', 'Банан', 'Вишня'];
const element = (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

key помогает Preact эффективно обновлять DOM, минимизируя количество изменений.

Выражения и атрибуты

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

const size = 50;
const element = <img src="logo.png" width={size} height={size} />;

Все значения, передаваемые через фигурные скобки, вычисляются как JavaScript выражения, что делает атрибуты динамическими.

Комбинирование строк и выражений

Для комбинирования строк с динамическими значениями используют как обычную конкатенацию, так и шаблонные строки:

const user = 'Иван';
const element = <p>Привет, {user + '!'}</p>;
const element2 = <p>{`Привет, ${user}!`}</p>;

Оба подхода полностью эквивалентны и выбираются по удобству в конкретной ситуации.

Выражения в JSX являются основным инструментом для динамического формирования интерфейса в Preact. Правильное понимание их работы позволяет создавать гибкие и лаконичные компоненты без лишнего кода.

Оглавление