ZeroTool Workbench
HTML 转 JSX 转换器
在浏览器中即时将 HTML 转换为 React JSX。自动处理 className、htmlFor、内联样式对象、驼峰命名事件和自闭合标签。免费无需注册。
使用方法
- 将 HTML 粘贴到左侧文本框。
- JSX 输出会在右侧文本框中即时出现。
- 点击复制将 JSX 输出复制到剪贴板。
转换规则
| HTML | JSX |
|---|---|
class="..." | className="..." |
for="..." | htmlFor="..." |
style="color:red" | style={{ color: 'red' }} |
onclick="..." | onClick="..." |
onchange="..." | onChange="..." |
tabindex | tabIndex |
readonly | readOnly |
maxlength | maxLength |
colspan | colSpan |
rowspan | rowSpan |
crossorigin | crossOrigin |
contenteditable | contentEditable |
<br> | <br /> |
<img src="..."> | <img src="..." /> |
<input ...> | <input ... /> |
<!-- 注释 --> | {/* 注释 */} |
常见使用场景
- 将静态 HTML 模板迁移为 React 组件
- 将设计工具（Figma、Webflow）导出的 HTML 片段粘贴到 JSX 文件中
- 学习 HTML 与 JSX 属性命名的区别
- 将 HTML 邮件模板转换为 React 邮件库可用的格式
- 快速将第三方 HTML 组件适配到 React 项目
FAQ
HTML 转 JSX 工具做什么？
它将标准 HTML 标记转换为合法的 React JSX 语法。主要变更包括：将 class 重命名为 className，将 for 重命名为 htmlFor，将内联样式转换为 JavaScript 对象，将事件处理器改为驼峰命名，以及为自闭合标签添加显式斜线。
JSX 中为什么用 className 而不是 class？
JSX 会被编译为 JavaScript，而 class 是 JavaScript 的保留关键字。React 使用 className 来避免冲突，转换器会自动处理这个重命名。
内联样式如何转换？
HTML 内联样式使用字符串：style="color: red; font-size: 14px"。JSX 需要对象：style={{ color: 'red', fontSize: '14px' }}。转换器会解析字符串并将属性名改为驼峰命名。
HTML 注释会变成什么？
HTML 注释（<!-- text -->）会被转换为 JSX 表达式注释（{/* text */}），这是 React JSX 解析器唯一接受的注释形式。
数据会发送到服务器吗？
不会。转换完全在浏览器中通过 JavaScript 运行，不传输任何数据。