Перейти к содержанию
TextArray1.41.0
100% локально

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

Превратите HTML-разметку в JSX, которую можно вставить прямо в компонент React.

Входные данные
Выходные данные
Связанные инструменты
HTML-форматерИнструменты разработчика
Конвертер объектов CSS в JSИнструменты разработчика
Конвертер HTML в BBCodeИнструменты разработчика
Удалить MarkdownОчистка текста
i18n ключевая разницаИнструменты разработчика
Конвертер TOML в JSONИнструменты разработчика
Конвертер HTML в JSX
Вставьте HTML-разметку и получите JSX, который можно вставить прямо в компонент React. Конвертер переименовывает каждый атрибут. React ожидает другое имя для — class становится className, for становится htmlFor, tabindex становится tabIndex, colspan становится colSpan и многие другие — поэтому консоль перестает предупреждать о неизвестных свойствах DOM в тот момент, когда вы вставляете фрагмент, скопированный из инструмента дизайна, экспорта CMS, шаблона электронной почты или старой статической страницы.
Встроенные стили — это следующее, от чего React отказывается в виде простой строки. Включите «Преобразовать стиль в объект», и style="color:red;font-size:16px" станет style={{ color: 'red', FontSize: '16px' }}, с каждым свойством CamelCased и каждым значением в кавычках, готовым для поддержки стиля. Элементы Void — это третья проблема: HTML позволяет вам оставлять <br>, <img>, <input>, <hr> и <meta> незакрытыми, но JSX не будет их анализировать, поэтому «Самозакрывающиеся элементы void» перезаписывает их как <br />, <img /> и так далее для вас.
Комментарии HTML превращаются в единственную форму комментариев, которую JSX принимает внутри разметки, поэтому <!-- вот так --> становится {/* вот так */}. Текстовое содержимое, пробелы и разрывы строк остаются в том же виде, в каком вы их написали, поэтому ваши отступы и текст переживают преобразование нетронутыми, а атрибуты data-* и aria-* намеренно оставляются через дефис, потому что JSX сохраняет их такими, какие они есть. Обе опции включены по умолчанию и могут быть отключены, если вы хотите только переименовать атрибуты.
Все преобразование происходит в вашем браузере как обычная обработка строк — без DOM, без сервера, без загрузки. Вставьте фирменную разметку из внутренней админки или клиентского сайта и ничего не покинет ваше устройство. Скопируйте JSX, загрузите его в виде файла или отправьте в другой инструмент TextArray для следующего шага.
FAQ
Какие атрибуты он переименовывает?
class → className, for → htmlFor и формы CamelCase, которые React ожидает: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet и многие другие. Атрибуты data-* и aria-* остаются такими, какие они есть, потому что JSX сохраняет их через дефис.
Преобразует ли он встроенные стили?
Да, когда включена опция «Преобразовать стиль в объект». Каждое объявление становится ключом в верблюжьем регистре со строковым значением в кавычках внутри объекта в стиле двойной скобки. Отключите эту опцию, чтобы оставить строки стиля нетронутыми.
Это полноценный парсер HTML?
Нет — это быстрое преобразование строк, а не DOM браузера. Он охватывает преобразования, которые действительно нужны React: переименования атрибутов, встроенные стили, элементы void и комментарии. Он не выполняет повторные отступы и не проверяет ваш HTML, поэтому неверные теги воспринимаются так, как написано.
Загружен ли мой HTML-код где-нибудь?
Нет. Преобразование выполняется полностью в вашем браузере с локальной обработкой строк. Ваша разметка никогда не достигает сервера, поэтому вставка внутреннего или клиентского кода безопасна.