Czym jest konwersja HTML do JSX?
Konwersja HTML do JSX to proces przekształcania standardowych znaczników HTML w składnię JSX, którą mogą renderować komponenty React. JSX wygląda podobnie do HTML, ale stosuje konwencje i reguły nazewnictwa JavaScript. Atrybuty takie jak class stają się className, for staje się htmlFor, a stringi style są zastępowane obiektami JavaScript. Te zmiany są wymagane, ponieważ JSX kompiluje się do wywołań React.createElement(), gdzie nazwy atrybutów muszą odpowiadać nazwom właściwości DOM API, a nie atrybutom HTML.
Mapowanie między atrybutami HTML a propsami JSX jest zdefiniowane w dokumentacji elementów DOM React. React używa camelCase dla wielowyrazowych atrybutów (tabindex staje się tabIndex, maxlength staje się maxLength), ponieważ identyfikatory JavaScript nie mogą zawierać myślników. Samozamykające się tagi jak <img>, <br> i <input> muszą zawierać końcowy ukośnik w JSX (<img />), gdyż JSX stosuje reguły XML, gdzie każdy tag musi być jawnie zamknięty.
htmlToJsxContent.whatBody3
Po co używać konwertera HTML do JSX?
Ręczne zmienianie nazw atrybutów i przepisywanie stringów style w dziesiątkach elementów HTML jest powolne i podatne na błędy. Konwerter obsługuje wszystkie transformacje naraz — wklej HTML z dowolnego źródła i otrzymaj prawidłowy JSX w kilka sekund.
Zastosowania konwertera HTML do JSX
Tabela mapowania atrybutów HTML na JSX
Poniższa tabela zawiera atrybuty HTML, które zmieniają się podczas konwersji do JSX. Atrybuty tu niewymienione (id, src, href, alt, placeholder itp.) pozostają niezmienione, ponieważ ich nazwy HTML już odpowiadają odpowiednim nazwom właściwości DOM API.
| Atrybut HTML | Prop JSX | Uwagi |
|---|---|---|
| class | className | Reserved word in JavaScript |
| for | htmlFor | Reserved word in JavaScript |
| tabindex | tabIndex | camelCase convention |
| readonly | readOnly | camelCase convention |
| maxlength | maxLength | camelCase convention |
| minlength | minLength | camelCase convention |
| cellpadding | cellPadding | camelCase convention |
| cellspacing | cellSpacing | camelCase convention |
| rowspan | rowSpan | camelCase convention |
| colspan | colSpan | camelCase convention |
| enctype | encType | camelCase convention |
| autocomplete | autoComplete | camelCase convention |
| autofocus | autoFocus | camelCase convention |
| autoplay | autoPlay | camelCase convention |
| contenteditable | contentEditable | camelCase convention |
| crossorigin | crossOrigin | camelCase convention |
| novalidate | noValidate | camelCase convention |
| allowfullscreen | allowFullScreen | camelCase convention |
| spellcheck | spellCheck | camelCase convention |
| http-equiv | httpEquiv | Hyphen removed, camelCase |
| onclick | onClick | Event handler camelCase |
| onchange | onChange | Event handler camelCase |
| onsubmit | onSubmit | Event handler camelCase |
Konwersja stylu inline: HTML kontra JSX
Style inline to najbardziej podatna na błędy część konwersji HTML do JSX, ponieważ zmienia się zarówno format wartości, jak i nazwy właściwości:
<div style="background-color: #fff; font-size: 14px; margin-top: 10px;">
<div style={{
backgroundColor: '#fff',
fontSize: '14px',
marginTop: 10
}}>Przykłady kodu
Poniższe przykłady pokazują, jak programistycznie konwertować HTML do JSX w różnych językach i środowiskach. Każdy obejmuje zmianę nazw atrybutów, konwersję stylu i obsługę samozamykających się tagów.
// Simple attribute conversion using string replacement
function htmlToJsx(html) {
return html
.replace(/\bclass=/g, 'className=')
.replace(/\bfor=/g, 'htmlFor=')
.replace(/\btabindex=/g, 'tabIndex=')
.replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
}
htmlToJsx('<div class="box" tabindex="0"><!-- note --></div>')
// → '<div className="box" tabIndex="0">{/* note */}</div>'import parse from 'html-react-parser'
// Parse HTML string into React elements (handles all JSX rules)
const element = parse('<div class="card"><img src="photo.jpg" alt="Photo"></div>')
// Returns: React.createElement('div', { className: 'card' },
// React.createElement('img', { src: 'photo.jpg', alt: 'Photo' }))
// With custom element replacement
const options = {
replace(domNode) {
if (domNode.name === 'img') {
return <OptimizedImage src={domNode.attribs.src} alt={domNode.attribs.alt} />
}
}
}
const custom = parse('<img src="photo.jpg" alt="Photo">', options)from bs4 import BeautifulSoup
import re
ATTR_MAP = {
'class': 'className', 'for': 'htmlFor',
'tabindex': 'tabIndex', 'readonly': 'readOnly',
'maxlength': 'maxLength', 'autocomplete': 'autoComplete',
}
def html_to_jsx(html: str) -> str:
"""Convert HTML attribute names to JSX equivalents."""
for html_attr, jsx_attr in ATTR_MAP.items():
html = re.sub(rf'\b{html_attr}=', f'{jsx_attr}=', html)
# Convert HTML comments to JSX comments
html = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', html)
return html
print(html_to_jsx('<label for="email" class="field">Email</label>'))
# → '<label htmlFor="email" className="field">Email</label>'package main
import (
"fmt"
"strings"
)
var attrMap = map[string]string{
"class=": "className=",
"for=": "htmlFor=",
"tabindex=": "tabIndex=",
"readonly": "readOnly",
}
func htmlToJSX(html string) string {
result := html
for old, new := range attrMap {
result = strings.ReplaceAll(result, old, new)
}
// Convert comments
result = strings.ReplaceAll(result, "<!--", "{/*")
result = strings.ReplaceAll(result, "-->", "*/}")
return result
}
func main() {
html := `<div class="wrapper"><input readonly tabindex="1"></div>`
fmt.Println(htmlToJSX(html))
// → <div className="wrapper"><input readOnly tabIndex="1"></div>
}