Конвертер HTML в JSX

Преобразуйте HTML в корректный JSX для React в вашем браузере — class становится className, пустые теги самозакрываются, а инлайновые стили — объектами style. Ваша разметка остаётся на вашем устройстве.

Конвертер HTML в JSX работает целиком в вашем браузере. Разметка, которую вы вставляете, разбирается и преобразуется на вашем устройстве и никогда не загружается в ArrayKit.

Открыть форматировщик HTML

Об инструменте Конвертер HTML в JSX

Конвертер HTML в JSX превращает блок HTML в JSX, который можно вставить прямо в компонент React. Он переименовывает атрибуты, на которых настаивает React — class становится className, а for становится htmlFor — переводит остальные в camelCase (tabindex → tabIndex, colspan → colSpan) и самозакрывает пустые элементы вроде br, img и input, чтобы разметка была корректной. Инлайновые строки style="color:red" разбираются в объекты style={{ color: 'red' }} со свойствами в camelCase, а комментарии HTML становятся комментариями JSX. Включите опцию компонента, чтобы обернуть всё в экспортируемую функцию. Он создан для разработчиков, переносящих дизайн, шаблон письма или статическую страницу в React. Каждое преобразование выполняется в вашем браузере — разметка, которую вы вставляете, никогда не покидает ваше устройство.

Возможности

Как использовать Конвертер HTML в JSX

  1. Вставьте ваш HTML в поле ввода слева
  2. Прочитайте преобразованный JSX в панели вывода справа
  3. Включите «Обернуть в компонент» и дайте ему имя, чтобы получить готовый к использованию компонент
  4. Скопируйте JSX или скачайте его как файл .jsx

Пример

Ввод

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

Результат

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for становится htmlFor, class становится className, tabindex становится tabIndex, а пустой <input> самозакрывается.

Частые ошибки и устранение неполадок

Часто задаваемые вопросы

Какие атрибуты HTML переименовываются для JSX?
class становится className, а for становится htmlFor. Многие атрибуты в нижнем регистре переводятся в camelCase — tabindex в tabIndex, colspan в colSpan, maxlength в maxLength, readonly в readOnly — тогда как атрибуты data-* и aria-* сохраняются ровно как написаны.
Как он преобразует инлайновый атрибут style?
Строка style="color: red; font-size: 12px" разбирается в объект стиля React, style={{ color: 'red', fontSize: '12px' }}, где каждое CSS-свойство переведено в camelCase. Пользовательские CSS-свойства вроде --brand и вендорные префиксы сохраняются.
Самозакрывает ли он пустые элементы вроде <br> и <img>?
Да. Пустые элементы HTML — br, img, input, hr, meta, link, source и остальные — выводятся самозакрытыми (<br />, <img … />), поэтому JSX корректен. Пустые не-void элементы тоже самозакрываются.
Что происходит с комментариями HTML при преобразовании?
Комментарии HTML переписываются в синтаксис комментариев JSX. Если текст комментария содержит последовательность «звёздочка-слеш», она разбивается, чтобы не закрыть комментарий JSX раньше времени и не сломать сборку.
Может ли он обернуть вывод в компонент React?
Включите «Обернуть в компонент» и дайте ему имя. Инструмент выдаёт экспортируемую функцию, которая возвращает ваш JSX, оборачивая несколько элементов верхнего уровня во фрагмент, чтобы был единственный корневой элемент.
Преобразует ли он onclick и другие инлайновые обработчики событий?
Инлайновые атрибуты событий переводятся в camelCase — onclick в onClick, onchange в onChange — но значение остаётся строкой. Вам всё равно придётся заменить строку на настоящую функцию-обработчик в вашем компоненте.

Связанные инструменты

Все инструменты ArrayKit