У цій статті
Чому 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 під час виконання.