Для разработчиков / React

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

Преобразуйте HTML в JSX для React: class в className, встроенные стили в объекты, закрытые пустые элементы, экранированные скобки и комментарии — с возможностью обернуть результат в компонент.

Конвертер HTML в JSX: HTML разбирается на элементы, поэтому атрибуты переименовываются для React (class, for, tabindex, readonly, maxlength и другие), стили преобразуются в объекты с ключами в camelCase, а пустые элементы, такие как <br> и <img>, закрываются. Фигурные скобки и угловые скобки в тексте экранируются, комментарии преобразуются в {/* */}, а значения полей формы — в defaultValue и defaultChecked, чтобы поля оставались доступными для редактирования. Результат для тестовых страниц компилируется как TSX. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
HTML в JSXЛокальная обработка

Полностью работает в браузере

  • onclick="send()" у <button> удалён: задайте его как функцию, например onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Атрибуты переименовываются для React (class в className, for в htmlFor, tabindex в tabIndex), стили преобразуются в объекты, пустые и беспарные элементы закрываются, комментарии преобразуются в {/* */}, а значения полей формы — в defaultValue, чтобы поля оставались доступными для редактирования.

После преобразования

Превратите повторяющуюся разметку в компоненты, принимающие props, замените жёстко заданный текст переменными в фигурных скобках, а встроенные стили перенесите в классы CSS или используемую вами систему стилей: объекты style создаются заново при каждом рендеринге.

Для SVG-иконок инструмент SVG в JSX создаёт компонент, который передаёт props дальше; чтобы сначала удалить комментарии и лишние пробелы, используйте минификатор HTML.

Различия, которые часто вызывают ошибки

JSX требует один корневой элемент, поэтому несколько элементов оборачиваются во фрагмент (<>…</>). Каждый элемент должен быть закрыт, имена атрибутов записываются в camelCase, а текст, содержащий { или }, нужно записывать как {"{"}; конвертер делает это за вас.

Как пользоваться

  1. Вставьте HTML — от одного элемента до целого раздела страницы.
  2. При необходимости оберните результат в именованный компонент.
  3. Скопируйте JSX и перепишите все встроенные обработчики событий, перечисленные в предупреждениях.

Конфиденциальность и ограничения

HTML преобразуется в вашем браузере и никогда не загружается на сервер.

Похожие инструменты

SVG в JSXМинификатор HTMLHTML-кодировщик

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

Почему атрибуты onclick удаляются?

В HTML это строки кода, а в React они должны быть функциями. Конвертер перечисляет каждый такой атрибут, чтобы вы могли переписать его — например, onclick="save()" в onClick={save}.

Почему value преобразуется в defaultValue?

Атрибут value в React делает поле управляемым, поэтому в него нельзя вводить текст без обработчика onChange; defaultValue задаёт исходный текст и оставляет поле доступным для редактирования.

Поддерживается ли SVG?

Да: атрибуты SVG, такие как stroke-width, преобразуются в strokeWidth. Для целого файла SVG, превращённого в компонент, инструмент SVG в JSX добавляет props.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен