Конвертер HTML в React JSX
Преобразует HTML-разметку в React JSX с помощью htmltojsx: class становится className, for — htmlFor, встроенные стили — объектами style, а пустые теги — самозакрывающимися. Несколько корневых элементов оборачиваются во фрагмент.
Перенести статический HTML-шаблон или форму в React-компонент.
HTML
JSX
Когда пригодится
- Перенести статический HTML-шаблон или форму в React-компонент.
- Преобразовать фрагмент разметки из документации или UI-кита в JSX, который можно вставить в компонент.
Как пользоваться
- Вставьте HTML в левый редактор.
- При желании откройте настройки и включите "Create function component", чтобы обернуть результат в export const Foo = () => (...).
- Скопируйте JSX, переименуйте компонент и замените встроенные атрибуты событий обработчиками React.
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>Подробности и ограничения
Преобразование выполняется в браузере, а результат форматируется Prettier (без точек с запятой).
Встроенные атрибуты событий вроде onclick="go()" остаются как есть и не превращаются в обработчики onClick.
Булевы атрибуты получают пустую строку, например disabled="". React считает "" значением false, поэтому замените это на disabled или disabled={true}.
Если на входе SVG, страница покажет подсказку со ссылкой на SVG to JSX.
FAQ
Как преобразуются встроенные стили?
Строка style разбирается в объект с ключами в camelCase, а значения в пикселях становятся числами: style="margin-top: 4px" превращается в style={{ marginTop: 4 }}.
Что происходит с HTML-комментариями?
Они сохраняются как комментарии JSX, например <!-- hint --> становится {/* hint */}.
Можно ли задать имя генерируемого компонента?
Нет. Опция функции всегда использует имя Foo. Переименуйте его после копирования.