Как писать JavaScript код внутри JSX?

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

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

Основные способы встраивания JavaScript

1. Отображение переменных и выражений

function UserGreeting({ userName, age }) {
  const currentYear = new Date().getFullYear();
  
  return (
    <div>
      <h1>Привет, {userName}!</h1>
      <p>Вам {age} лет</p>
      <p>Сейчас {currentYear} год</p>
      <p>Следующий год: {currentYear + 1}</p>
    </div>
  );
}

2. Условный рендеринг

function Notification({ message, type }) {
  return (
    <div>
      {type === 'error' && (
        <div className="alert error">{message}</div>
      )}
      {type === 'warning' ? (
        <div className="alert warning">{message}</div>
      ) : (
        <div className="alert info">{message}</div>
      )}
    </div>
  );
}

3. Рендеринг списков

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={todo.id}>
          {todo.completed ? '✅' : '⬜'} {todo.text}
          {index < todos.length - 1 && <hr />}
        </li>
      ))}
    </ul>
  );
}

4. Вызов функций и методов

function PriceDisplay({ price, currency }) {
  const formatPrice = (amount) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: currency
    }).format(amount);
  };

  return (
    <div>
      <p>Цена: {formatPrice(price)}</p>
      <p>Со скидкой: {formatPrice(price * 0.9)}</p>
    </div>
  );
}

Важные ограничения и лучшие практики

Что можно использовать внутри {}:

• Любые выражения JavaScript, возвращающие значение
• Переменные и константы
• Функции и вызовы методов
• Тернарные операторы для условного рендеринга
• Логические операторы (&&, ||)
• Массивы (элементы будут объединены в строку)

Что НЕЛЬЗЯ использовать:

• Операторы (if, for, switch) - только выражения
• Объявления переменных (используйте их выше в компоненте)
• Циклы for (используйте map() для массивов)

// ❌ Неправильно
function WrongExample() {
  return (
    <div>
      {if (condition) { return <span>Yes</span> }} // Ошибка!
    </div>
  );
}

// ✅ Правильно
function CorrectExample({ condition }) {
  return (
    <div>
      {condition ? <span>Yes</span> : <span>No</span>}
    </div>
  );
}

Продвинутые техники

Инлайн-стили с объектами JavaScript

function StyledBox({ color, size }) {
  const boxStyle = {
    backgroundColor: color,
    width: `${size}px`,
    height: `${size}px`,
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };

  return (
    <div style={boxStyle}>
      <span style={{ color: '#fff', fontWeight: 'bold' }}>
        Размер: {size}px
      </span>
    </div>
  );
}

Динамические атрибуты

function DynamicInput({ type = 'text', required = false }) {
  const inputAttributes = {
    type,
    className: `input input-${type}`,
    required,
    'data-testid': `input-${type}`
  };

  if (type === 'email') {
    inputAttributes.pattern = '[^@\\s]+@[^@\\s]+\\.[^@\\s]+';
  }

  return <input {...inputAttributes} />;
}

Работа с обработчиками событий

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = (increment) => {
    setCount(prev => prev + increment);
  };

  return (
    <div>
      <p>Текущее значение: {count}</p>
      <button onClick={() => handleClick(1)}>
        Увеличить (+1)
      </button>
      <button onClick={() => handleClick(-1)}>
        Уменьшить (-1)
      </button>
      <button onClick={() => {
        console.log('Сброс счетчика');
        setCount(0);
      }}>
        Сбросить
      </button>
    </div>
  );
}

Производительность и оптимизация

При встраивании JavaScript в JSX важно учитывать производительность:

1. Избегайте сложных вычислений внутри JSX - выносите их в отдельные переменные или useMemo
2. Не создавайте функции внутри JSX в цикле рендеринга
3. Используйте ключи (keys) при рендеринге списков

function OptimizedComponent({ items }) {
  // ✅ Вычисление вне JSX
  const processedItems = useMemo(() => 
    items.map(item => ({
      ...item,
      formattedDate: new Date(item.date).toLocaleDateString('ru-RU')
    }))
  , [items]);

  // ✅ Функция создается один раз
  const handleItemClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return (
    <ul>
      {processedItems.map(item => (
        <li 
          key={item.id}
          onClick={() => handleItemClick(item.id)}
        >
          {item.name} - {item.formattedDate}
        </li>
      ))}
    </ul>
  );
}

Заключение

Встраивание JavaScript в JSX через фигурные скобки {} предоставляет мощный и гибкий способ создания динамических интерфейсов. Главное - помнить, что внутри {} можно использовать только выражения JavaScript, а не операторы. Правильное использование этой возможности позволяет создавать чистый, поддерживаемый и эффективный код, который легко читать и отлаживать. Современные инструменты разработки, такие как ESLint и TypeScript, помогают контролировать корректность использования JavaScript внутри JSX.