Конвертер HTML в JSX
Перетворіть розмітку HTML на JSX, яку можна вставити прямо в компонент React.
Конвертер HTML в JSX
Вставте HTML-розмітку та отримайте JSX, який можна перемістити прямо в компонент React. Конвертер перейменовує кожен атрибут, для якого React очікує іншої назви — class стає className, for стає htmlFor, tabindex стає tabIndex, colspan стає colSpan і десятки інших — тому консоль припиняє попереджати про невідомі властивості DOM, коли ви вставляєте фрагмент, скопійований з інструменту дизайну, експорту CMS, шаблону електронної пошти або старої статичної сторінки.
Вбудовані стилі — наступне, від чого React відмовляється як звичайний рядок. Увімкніть «Перетворити стиль на об’єкт», і style="color:red;font-size:16px" стане style={{ color: 'red', fontSize: '16px' }}, з кожною властивістю camelCased і кожним значенням у лапках, готовим для опорного стилю. Елементи Void є третьою заковикою: HTML дозволяє залишати <br>, <img>, <input>, <hr> і <meta> незакритими, але JSX не аналізуватиме їх, тому «Самозакриваючі елементи void» переписує їх як <br />, <img /> тощо для вас.
Коментарі HTML перетворюються на єдину форму коментарів, яку JSX приймає всередині розмітки, тому <!-- like this --> стає {/* like this */}. Текстовий вміст, пробіли та розриви рядків залишаються точно такими, як ви їх написали, тож ваші відступи та копія залишаються незмінними після перетворення, а атрибути data-* та aria-* навмисно залишено через дефіс, оскільки JSX зберігає їх такими, якими вони є. Обидва параметри ввімкнено за замовчуванням і їх можна вимкнути, якщо потрібно лише перейменувати атрибути.
Усе перетворення відбувається у вашому браузері як звичайна обробка рядків — без DOM, без сервера, без завантаження. Вставте власну розмітку з внутрішньої панелі адміністратора або сайту клієнта, і нічого не залишить ваш пристрій. Скопіюйте JSX, завантажте його як файл або надішліть до іншого інструменту TextArray для наступного кроку.