HTML 转 JSX 转换器
所有工具
免费
粘贴 HTML 即可获得干净的 React JSX——class 变为 className，属性转为驼峰命名，style 字符串变为对象，标签自闭合。完全在你的浏览器中运行。免费。
一切都在你的浏览器中运行——你的标记永远不会离开你的设备。
1
{ }
你的 JSX 将显示在这里
关于 HTML 转 JSX 转换器
HTML 转 JSX 转换器可实时将普通 HTML 标记转换为可用于 React 的 JSX。它会把 class 重写为 className、for 重写为 htmlFor，将短横线命名的属性和 SVG 属性转为驼峰命名，把行内 style 字符串转换为 JSX 的 style 对象，并将 img、br 等空元素自闭合——这些正是你原本需要手动完成的修改。
粘贴一段代码片段、一个完整的页面区块，或从设计工具导出的标记，JSX 面板会随着你的输入实时更新并带有语法高亮。可选的包装选项能把输出转换为一个具名函数组件，让结果无需进一步修改就能直接放入 React 项目。
该转换器是完全客户端运行的 HTML 转 JSX 工具：你的标记由浏览器中的 JavaScript 转换，永远不会离开你的设备，因此可安全用于专有模板和内部页面。
如何使用 HTML 转 JSX 转换器
- 将 HTML 粘贴到左侧面板，或点击"示例"加载一个示例。
- 输入或编辑时，观察 JSX 面板即时更新。
- 如果想要现成的函数组件，可开启"包装为组件"并设置组件名称。
- 点击"复制"获取 JSX，或点击"下载"将其保存为 Component.jsx。
- 使用"清除"重置两个面板，转换另一段代码。
常见问题
它会把 class 重命名为 className、for 重命名为 htmlFor，将带短横线的属性（包括 SVG 属性）转为驼峰命名，把行内 style 字符串转换为 JSX 的 style 对象，并将 img、br、input 等空标签自闭合，使输出成为合法的 JSX。
可以。启用"包装为组件"并选择一个组件名称，工具就会围绕转换后的标记生成一个完整的函数组件，可直接粘贴到你的项目中，或下载为 .jsx 文件。
可以。像 style="margin-top: 10px" 这样的 style 属性会变成 style={{marginTop: '10px'}} 这样的 JSX 对象，每个 CSS 属性都会被驼峰命名，包括带厂商前缀的属性。
不会。转换完全在浏览器中运行，因此你的标记永远不会离开你的设备。你可以放心转换内部模板和未发布的页面。
是的，完全免费。无需账号，不消耗积分，转换次数也不受限制。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。