HTML 转 JSX 转换器
将 HTML 代码转换为有效的 React JSX。自动转换 class 为 className，内联样式为对象，自闭合空元素等。
HTML 输入0 字符
JSX 输出
转换规则
HTML
JSX
原因
class="..."
className="..."
class 是 JS 保留字
for="..."
htmlFor="..."
for 是 JS 保留字
style="color: red"
style={{ color: "red" }}
JSX 使用样式对象
tabindex="0"
tabIndex="0"
JSX 使用驼峰命名属性
<!-- comment -->
{/* comment */}
JSX 使用 JS 注释语法
<br>
<br />
JSX 需要自闭合标签
onclick="fn()"
onClick="fn()"
JSX 使用驼峰命名事件
为什么 JSX 和 HTML 不同
JSX 是 JavaScript 的语法扩展，而不是 HTML。由于它编译为 JavaScript 函数调用，某些 HTML 属性与 JavaScript 保留字冲突（如 class 和 for），内联样式必须是 JavaScript 对象而非 CSS 字符串。
此工具转换的内容
- - class 转为 className，for 转为 htmlFor
- - 内联样式字符串转为 JavaScript 对象
- - HTML 注释转为 JSX 注释
- - 自闭合空元素（br, img, hr, input）
- - 驼峰命名事件处理器和属性
如何在线将 HTML 转换为 JSX
- 1.将 HTML 代码粘贴到左侧面板，或点击加载示例试试效果。
- 2.转换器会自动将 HTML 实时转换为有效的 JSX。
- 3.查看下方的转换规则表了解每项转换。
- 4.点击复制将 JSX 输出复制到剪贴板。
FAQ
此工具能处理所有 HTML 属性吗？
此工具转换最常见的 HTML-JSX 属性差异，包括 class、for、tabindex、readonly 和 30 多个其他属性。它还将所有内联事件处理器（onclick、onchange 等）转换为驼峰命名格式。
这会生成完整的 React 组件吗？
此工具将原始 HTML 标记转换为有效的 JSX 语法，不会将输出包装在 React 组件函数中。你可以将 JSX 输出直接粘贴到组件的 return 语句中。
内联样式是如何转换的？
CSS 样式字符串如 style="color: red; font-size: 16px" 会被转换为 JSX 样式对象：style={{ color: "red", fontSize: "16px" }}。CSS 属性会自动转换为驼峰命名。
我的 HTML 数据会发送到服务器吗？
不会。所有转换完全在浏览器中使用 JavaScript 进行。你的 HTML 代码不会被上传、存储或在任何服务器上处理。