Входные данные
Подготовка рабочей области…
Как пользоваться
- Вставьте HTML-фрагмент, откройте UTF-8 файл или загрузите образец.
- Выберите отступы и преобразуйте в JSX.
- Проверьте разметку, затем скопируйте или скачайте её.
Перенос HTML-разметки в React
HTML из шаблона обычно требует адаптации для JSX: className, htmlFor, самозакрывающиеся элементы и другая запись встроенных стилей.
Конвертер обрабатывает структуру разметки. Состояние компонента, обработчики событий и логику приложения нужно написать в месте использования JSX.
Атрибуты и стили
Атрибуты HTML преобразуются в формы React, включая className и htmlFor. Для распространённых SVG-атрибутов применяется регистр React.
Встроенный CSS становится объектом style, результат форматируется как JSX. Литеральный текст экранируется, а не рассматривается как выражение JavaScript.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Сокращённый пример преобразования атрибутов. Полный результат отформатирован и обёрнут во fragment.
Структура и поведение
Перед преобразованием HTML-фрагмент разбирается. Результат использует оболочку fragment и самозакрывающийся синтаксис, где нужно.
Элементы script и встроенные атрибуты событий удаляются. Их поведение не превращается в callback React; оставшиеся URL и стили также требуют проверки в приложении.
Интеграция результата
Вставьте JSX в render или выражение return компонента. Подключите поведение вручную. Проверьте стили: повторяющиеся fallback-декларации и !important не всегда представимы объектом style.
Текстовый ввод до 1 MiB. Преобразования CSS и HTML выполняются в Worker с ограничением 30 секунд. Инструменты цвета используют sRGB; созданные стили служат предпросмотром и требуют проверки в вашем макете.
Частые вопросы
Получится ли готовый компонент React?
Нет. Результат — разметка JSX. Компонент, импорты, данные и поведение добавляются в проекте.
Что происходит со script и onclick?
Элементы script и встроенные атрибуты событий удаляются. Их код не исполняется и не переводится в обработчики React.
Почему фигурные скобки остаются текстом?
Ввод разбирается как HTML. Литеральные скобки экранируются для JSX и не вычисляются как выражения.
Точно ли преобразуются встроенные стили?
Обычные декларации становятся свойствами style React. Повторные fallback-декларации и !important не всегда можно точно представить объектом JavaScript.
Можно ли преобразовать SVG?
Распространённые SVG-атрибуты преобразуются в имена React. Проверьте ID, ссылки и специфичные атрибуты в компоненте.