Převaděč HTML na JSX
Změňte HTML značky na JSX, které můžete vložit přímo do komponenty React.
Převaděč HTML na JSX
Vložte HTML značky a získejte JSX, které můžete vložit přímo do komponenty React. Převaděč přejmenuje každý atribut React očekává jiný název pro — class se stane className, for se stane htmlFor, tabindex se stane tabIndex, colspan colSpan a desítky dalších — takže konzole přestane upozorňovat na neznámé vlastnosti DOM ve chvíli, kdy vložíte úryvek zkopírovaný z nástroje pro návrh, export CMS, e-mailovou šablonu nebo starou statickou stránku.
Inline styly jsou další věcí, kterou React odmítá jako prostý řetězec. Zapněte "Převést styl na objekt" a style="color:red;font-size:16px" se změní na styl={{ color: 'red', fontSize: '16px' }}, s každou vlastností camelCased a každou uvedenou hodnotou, připraveno pro návrh stylu. Prvky void jsou třetím úlovkem: HTML vám umožňuje ponechat <br>, <img>, <input>, <hr> a <meta> neuzavřené, ale JSX je nebude analyzovat, takže "Self-close void elements" je přepíše jako <br />, <img /> a tak dále.
Komentáře HTML se změní na jediný formulář komentáře, který JSX přijímá uvnitř označení, takže <!-- takto --> se změní na {/* takto */}. Textový obsah, mezery a zalomení řádků zůstanou přesně tak, jak jste je napsali, takže vaše odsazení a kopie přežijí převod beze změny a atributy data-* a aria-* jsou záměrně ponechány s pomlčkou, protože JSX je zachová tak, jak jsou. Obě možnosti jsou ve výchozím nastavení zapnuté a lze je vypnout, pokud chcete atribut pouze přejmenovat.
Celá konverze probíhá ve vašem prohlížeči jako zpracování prostého řetězce – žádný DOM, žádný server, žádné nahrávání. Vložte proprietární označení z interního administrátorského panelu nebo klientského webu a nic neopustí vaše zařízení. Zkopírujte soubor JSX, stáhněte si jej jako soubor nebo jej odešlete do jiného nástroje TextArray pro další krok.