Конвертация HTML в JSX: особенности и подводные камни

Конвертация HTML в JSX — частная задача при переносе вёрстки в React или при интеграции готовых HTML-шаблонов. JSX похож на HTML, но имеет отличия в синтаксисе атрибутов, именовании и обработке событий. В этой статье разберём основные различия и типичные ошибки.

Почему HTML не равен JSX

JSX компилируется в вызовы React.createElement. Атрибуты и имена тегов должны соответствовать DOM API и соглашениям React. Некоторые HTML-атрибуты и конструкции требуют замены.

Отличия атрибутов

class → className

В HTML используется class, в JSX — className, так как class зарезервировано в JavaScript.

<!-- HTML -->
<div class="container">...</div>

// JSX
<div className="container">...</div>

for → htmlFor

Атрибут for у <label> в JSX заменяется на htmlFor.

<!-- HTML -->
<label for="email">Email</label>
<input id="email" type="email">

// JSX
<label htmlFor="email">Email</label>
<input id="email" type="email" />

tabindex → tabIndex

CamelCase для атрибутов с дефисом.

<!-- HTML -->
<div tabindex="0">...</div>

// JSX
<div tabIndex={0}>...</div>

Стили: объект вместо строки

В HTML стили задаются строкой, в JSX — объектом с camelCase-свойствами.

<!-- HTML -->
<div style="background-color: red; font-size: 16px;">...</div>

// JSX
<div style={{ backgroundColor: 'red', fontSize: 16 }}>...</div>

Числовые значения (кроме 0) по умолчанию интерпретируются как пиксели. Для единиц указывайте строку: fontSize: '1rem'.

Самозакрывающиеся теги

В HTML теги вроде <img>, <br>, <input> могут быть без закрывающего тега. В JSX все теги должны быть закрыты.

<!-- HTML -->
<img src="photo.jpg" alt="Photo">
<br>
<input type="text">

// JSX
<img src="photo.jpg" alt="Photo" />
<br />
<input type="text" />

Булевы атрибуты

В HTML булевы атрибуты могут быть пустыми или с тем же именем в качестве значения. В JSX используется булево значение.

<!-- HTML -->
<input disabled>
<option selected>Option</option>

// JSX
<input disabled={true} />
{/* или короче */}
<input disabled />
<option selected>Option</option>

selected в <option> в React обычно управляется через value у <select>, а не через атрибут.

Обработка событий

В HTML обработчики задаются строчными буквами, в JSX — camelCase.

<!-- HTML -->
<button onclick="handleClick()">Click</button>
<div onmouseover="handleHover()">...</div>

// JSX
<button onClick={handleClick}>Click</button>
<div onMouseOver={handleHover}>...</div>

Важно: в JSX передаётся ссылка на функцию, а не строка. Не onClick="handleClick()", а onClick={handleClick}. Вызов с скобками handleClick() выполнит функцию при рендере, а не по клику.

Опасный HTML: dangerouslySetInnerHTML

Если нужно вставить сырой HTML (например, из CMS), в React используется dangerouslySetInnerHTML.

<!-- HTML -->
<div>
  <p>Текст с <strong>разметкой</strong></p>
</div>

// JSX с сырым HTML
function Content({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Риск: XSS при недоверенном контенте. Санитизируйте HTML перед вставкой (например, DOMPurify).

data-* и aria-* атрибуты

Атрибуты data-* и aria-* в JSX пишутся так же, как в HTML (в lowercase с дефисами).

<div data-id="123" aria-label="Закрыть">...</div>

Комментарии

В JSX комментарии записываются как в JavaScript, внутри {/* */}.

<div>
  {/* Это комментарий */}
  <p>Текст</p>
</div>

Типичные ошибки при конвертации

Автоматическая конвертация

Ручная замена атрибутов на больших фрагментах трудоёмка. Используйте инструмент HTML to React на reChecker — он преобразует HTML в JSX с учётом атрибутов, стилей и самозакрывающихся тегов.

Пример ввода:

<div class="card">
  <img src="photo.jpg" alt="Photo">
  <label for="name">Имя</label>
  <input id="name" type="text">
</div>

Результат будет с className, htmlFor и закрытыми тегами.

Итог

Конвертация HTML в JSX требует замены class на className, for на htmlFor, перевода стилей в объект и закрытия всех тегов. Обработчики событий пишутся в camelCase и принимают функцию. Для автоматизации используйте специализированные инструменты конвертации.