HTML转JSX
将HTML标记转换为React的JSX语法。自动转换属性、内联样式和void元素。
已应用的转换：
class→classNamefor→htmlForstyle="..."→style={{...}}- void元素（br、hr、img、input）自闭合
- HTML注释转换为 {/* */}
常见问题
代码实现
import re
def html_to_jsx(html: str) -> str:
jsx = html
# class -> className
jsx = re.sub(r'\bclass=', 'className=', jsx)
# for -> htmlFor
jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
# HTML comments to JSX
jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
# Self-close void elements
void_elements = ['area','base','br','col','embed','hr','img','input',
'link','meta','param','source','track','wbr']
for tag in void_elements:
jsx = re.sub(
rf'<{tag}(\s[^>]*)?>',
lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
jsx, flags=re.IGNORECASE
)
return jsx
html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.