HTML转JSX
将HTML标记转换为React的JSX语法。自动转换属性、内联样式和void元素。
已应用的转换：
class→classNamefor→htmlForstyle="..."→style={{...}}- void元素（br、hr、img、input）自闭合
- HTML注释转换为 {/* */}
关于此工具
HTML to JSX 是一个将标准 HTML 标记转换为 React 应用程序的有效 JSX 语法的转换工具。在开发 React 组件时，开发人员经常需要将 HTML 片段转换为 JSX 格式，这需要更改属性名称（class 改为 className）、以不同方式处理内联样式（从字符串到对象）以及调整 void 元素。此工具自动化这些转换，节省时间并减少手动转换错误。
要使用该工具，请将您的 HTML 代码粘贴到输入框中，然后点击"转换"。转换器立即生成有效的 JSX 输出，您可以直接复制到 React 组件中。它处理常见的转换，例如 HTML 事件处理程序（onclick 改为 onClick）、布尔属性（checked、disabled）、数据属性和 CSS 类名。典型用途包括将现有 HTML 模板迁移到 React、集成第三方 HTML 片段，或从模型快速生成组件 JSX。
转换器完全在浏览器中运行，无需服务器上传，因此您的代码保持私密。请注意，复杂的动态模板或条件渲染逻辑在转换后可能仍需要手动调整。对于具有复杂状态管理或自定义逻辑的组件，生成的 JSX 可作为可进一步完善的坚实起点。
常见问题
代码实现
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.