Загрузка...
Загрузка...
Руководство по преобразованию HTML в JSX для React. Отличия синтаксиса, атрибуты, обработка событий и типичные ошибки.
Подробное руководство по CSS Flexbox: свойства контейнера и элементов, оси, выравнивание, практические примеры и типичные паттерны вёрстки.
CSS & ДизайнПодробное руководство по CSS Grid: свойства контейнера и элементов, именованные области, авторазмещение, практические примеры и типичные паттерны.
CSS & ДизайнПолное руководство по центрированию элементов с помощью CSS Flexbox: по горизонтали, вертикали, по обеим осям, а также центрирование с учётом отступов.
CSS & ДизайнСравнение Flexbox и CSS Grid: сильные стороны каждой технологии, типичные сценарии использования и рекомендации по выбору для разных задач вёрстки.
Поделитесь с коллегами или изучите другие материалы блога
Конвертация HTML в JSX — частная задача при переносе вёрстки в React или при интеграции готовых HTML-шаблонов. JSX похож на HTML, но имеет отличия в синтаксисе атрибутов, именовании и обработке событий. В этой статье разберём основные различия и типичные ошибки.
JSX компилируется в вызовы React.createElement. Атрибуты и имена тегов должны соответствовать DOM API и соглашениям React. Некоторые HTML-атрибуты и конструкции требуют замены.
В HTML используется class, в JSX — className, так как class зарезервировано в JavaScript.
<!-- HTML -->
<div class="container">...</div>
// JSX
<div className="container">...</div>
Атрибут 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" />
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 (например, из 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-* в JSX пишутся так же, как в HTML (в lowercase с дефисами).
<div data-id="123" aria-label="Закрыть">...</div>
В JSX комментарии записываются как в JavaScript, внутри {/* */}.
<div>
{/* Это комментарий */}
<p>Текст</p>
</div>
| Ошибка | Решение |
|---|---|
class вместо className | Заменить на className |
for вместо htmlFor | Заменить на htmlFor |
| Стиль как строка | Преобразовать в объект {{ key: value }} |
Незакрытый <img> или <input> | Добавить /> |
onclick вместо onClick | CamelCase и передача функции |
| Вставка HTML как дочерний элемент | Использовать dangerouslySetInnerHTML |
tabindex | Заменить на tabIndex |
Ручная замена атрибутов на больших фрагментах трудоёмка. Используйте инструмент 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 и принимают функцию. Для автоматизации используйте специализированные инструменты конвертации.