تبدیل HTML به JSX چیست؟
تبدیل HTML به JSX فرایند تبدیل نشانهگذاری استاندارد HTML به نحو JSX است که کامپوننتهای React میتوانند آن را رندر کنند. JSX از نظر ظاهری شبیه HTML است، اما از قراردادها و قوانین نامگذاری JavaScript پیروی میکند. ویژگیهایی مانند class به className تبدیل میشوند، for به htmlFor تغییر میکند، و رشتههای style درونخطی با اشیاء JavaScript جایگزین میشوند. این تغییرات ضروری هستند زیرا JSX به فراخوانیهای React.createElement() کامپایل میشود، که در آن نام ویژگیها باید با نام خصوصیات DOM API مطابقت داشته باشند، نه نام ویژگیهای HTML.
نگاشت بین ویژگیهای HTML و props های JSX توسط مستندات عناصر DOM در React تعریف شده است. React از camelCase برای ویژگیهای چند کلمهای استفاده میکند (tabindex به tabIndex، maxlength به maxLength تبدیل میشود) زیرا شناسههای JavaScript نمیتوانند حاوی خط تیره باشند. تگهای خود-بسته مانند <img>، <br> و <input> باید در JSX شامل یک اسلش پایانی باشند (<img />) زیرا JSX از قوانین XML پیروی میکند که در آن هر تگ باید به صراحت بسته شود.
htmlToJsxContent.whatBody3
چرا از مبدل HTML به JSX استفاده کنیم؟
تغییر نام دستی ویژگیها و بازنویسی رشتههای style در دهها عنصر HTML کند و مستعد خطاست. یک مبدل همه تبدیلها را به یکباره انجام میدهد و به شما امکان میدهد HTML را از هر منبعی بچسبانید و در ثانیه JSX معتبر دریافت کنید.
موارد استفاده از مبدل HTML به JSX
جدول مرجع نگاشت ویژگیهای HTML به JSX
جدول زیر ویژگیهای HTML را که هنگام تبدیل به JSX تغییر میکنند فهرست میکند. ویژگیهایی که اینجا فهرست نشدهاند (id، src، href، alt، placeholder و غیره) بدون تغییر باقی میمانند زیرا نامهای HTML آنها از قبل با نام خصوصیات متناظر در DOM API مطابقت دارند.
| ویژگی HTML | Prop در JSX | توضیحات |
|---|---|---|
| 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 |
تبدیل استایل درونخطی: HTML در مقابل JSX
استایلهای درونخطی مستعدترین بخش تبدیل HTML به JSX هستند زیرا هم قالب مقدار و هم نام خصوصیات تغییر میکنند:
<div style="background-color: #fff; font-size: 14px; margin-top: 10px;">
<div style={{
backgroundColor: '#fff',
fontSize: '14px',
marginTop: 10
}}>نمونههای کد
این نمونهها نشان میدهند چگونه HTML به JSX را به صورت برنامهنویسی در زبانها و محیطهای مختلف تبدیل کنید. هر نمونه تغییر نام ویژگی، تبدیل style و مدیریت تگهای خود-بسته را پوشش میدهد.
// 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>
}