HTML 转 JSX

把 HTML 转换为 React JSX：class 改为 className，内联样式转为对象，处理自闭合标签和注释，还可以选择包装为组件。免费的在线转换工具。

关于此工具

把 HTML 转换为 React JSX。属性会被重命名（class → className，for → htmlFor），内联样式转为对象，空元素标签自闭合，注释转为 JSX 注释。

使用方法

  1. 粘贴 HTML。
  2. 可选择开启“包装为组件”。
  3. 把 JSX 复制到你的 React 代码中。

常见问题

有多个根元素怎么办？

它们会被包裹在片段 <>…</> 中，使结果成为有效的 JSX。

事件处理器会被转换吗？

onclick 会变成 onClick，但值仍然是字符串。请在组件中把它替换为函数。

文本中的花括号如何处理？

会被转义为 {'{'} 和 {'}'}，避免 JSX 把它们当作表达式。

相关工具