Перейти к содержимому
🛠️ToolsShed

HTML to JSX

Преобразуйте HTML-разметку в синтаксис JSX для React. Автоматически преобразует атрибуты, встроенные стили и пустые элементы.

Применены преобразования:

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Пустые элементы (br, hr, img, input) самозакрывающиеся
  • HTML-комментарии преобразованы в {/* */}

Об этом инструменте

HTML to JSX — это конвертер, который преобразует стандартную разметку HTML в синтаксически корректный код JSX для использования в приложениях React. При разработке компонентов React разработчикам часто требуется преобразовать фрагменты HTML в формат JSX, что требует изменения имён атрибутов (class на className), обработки встроенных стилей по-другому (строка на объект) и адаптации void-элементов. Этот инструмент автоматизирует эти преобразования, экономя время и снижая количество ошибок при ручном преобразовании.

Чтобы использовать инструмент, вставьте ваш код HTML в поле ввода и нажмите кнопку "Конвертировать". Конвертер мгновенно создаёт валидный вывод JSX, который можно скопировать непосредственно в ваши компоненты React. Он обрабатывает распространённые преобразования, такие как обработчики событий HTML (onclick на onClick), булевы атрибуты (checked, disabled), атрибуты данных и имена CSS-классов. Типичные случаи применения включают миграцию существующих HTML-шаблонов в React, интеграцию HTML-фрагментов от третьих сторон или быструю генерацию JSX компонентов из макетов.

Конвертер работает полностью в вашем браузере без загрузки на сервер, поэтому ваш код остаётся приватным. Учитывайте, что сложные динамические шаблоны или логика условного рендеринга могут потребовать ручной доработки после преобразования. Для компонентов с запутанным управлением состоянием или пользовательской логикой генерируемый JSX служит прочной отправной точкой, которую вы можете дополнительно совершенствовать.

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

Реализация кода

import re

def html_to_jsx(html: str) -> str:
    jsx = html
    # class -> className
    jsx = re.sub(r'\bclass=', 'className=', jsx)
    # for -> htmlFor
    jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
    # HTML comments to JSX
    jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
    # Self-close void elements
    void_elements = ['area','base','br','col','embed','hr','img','input',
                     'link','meta','param','source','track','wbr']
    for tag in void_elements:
        jsx = re.sub(
            rf'<{tag}(\s[^>]*)?>',
            lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
            jsx, flags=re.IGNORECASE
        )
    return jsx

html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.