В этой статье
Почему HTML нуждается в конвертации для React
JSX выглядит как HTML, но следует правилам синтаксиса JavaScript. React использует JSX для описания структуры интерфейса, и хотя он напоминает HTML, несколько атрибутов и шаблонов отличаются. Вставка сырого HTML в компонент React обычно приводит к ошибкам компиляции или неожиданному поведению.
Наиболее распространённые различия включают именование атрибутов (class становится className, for становится htmlFor), синтаксис встроенных стилей (строки становятся объектами со свойствами в camelCase), самозакрывающиеся теги (каждый пустой элемент должен самозакрываться) и именование обработчиков событий (onclick становится onClick). Конвертер автоматизирует эти утомительные преобразования.
Что конвертируется
Конвертер HTML в JSX от CheckTown обрабатывает все стандартные преобразования между синтаксисом HTML и JSX.
- Переименование атрибутов — class в className, for в htmlFor, tabindex в tabIndex и все другие специфичные для React имена атрибутов
- Разбор стилей — встроенные атрибуты style со строками CSS преобразуются в объекты JavaScript с именами свойств в camelCase и строковыми значениями
- Самозакрывающиеся теги — элементы вроде <img>, <br>, <hr> и <input> конвертируются в <img />, <br />, <hr />, <input />
- Булевы атрибуты — checked, disabled, readonly конвертируются в их JSX-эквиваленты
Попробуйте бесплатно — без регистрации
Конвертировать HTML в JSX →Распространённые подводные камни при конвертации HTML в JSX
Даже при автоматической конвертации есть шаблоны, требующие ручного внимания после начального преобразования.
- Комментарии HTML преобразуются в синтаксис комментариев JSX — проверьте, что вложенные комментарии не вызывают проблем
- SVG-атрибуты вроде stroke-width и fill-opacity используют camelCase в JSX (strokeWidth, fillOpacity) — проверьте контент с большим количеством SVG
- Встроенные обработчики событий со строками JavaScript (onclick="alert()") требуют ручного преобразования в обработчики JSX со стрелочными функциями
- Сущности HTML могут потребовать преобразования в символы Unicode или выражения JSX
Часто задаваемые вопросы
Является ли конвертация 100% точной для всего HTML?
Конвертер точно обрабатывает стандартное отображение атрибутов HTML-JSX, разбор стилей и самозакрывающиеся теги. Однако сложные шаблоны, такие как встроенные обработчики событий JavaScript, встроенные скрипты или нестандартные атрибуты, могут потребовать ручных корректировок после конвертации.
Могу ли я конвертировать HTML-шаблоны с динамическими данными?
Конвертер работает со статической HTML-разметкой. Синтаксис шаблонов из других фреймворков (вроде *ngFor из Angular или v-for из Vue) будет сохранён как есть, но не будет работать в React. Вам нужно вручную конвертировать директивы шаблонов в выражения JSX.
Обрабатывает ли конвертер dangerouslySetInnerHTML?
Нет. Конвертер преобразует структуру HTML в структуру JSX. Если вам нужно рендерить сырые HTML-строки внутри React, вы бы использовали dangerouslySetInnerHTML вручную. Конвертер предназначен для структурной миграции, а не для инъекции HTML во время выполнения.