HTML 转 JSX — 粘贴标记直接生成 React

<div className="card" style={{ padding: '16px', backgroundColor: '#f8fafc' }}> <label htmlFor="email">Email</label> <input id="email" type="email" required /> {/* submit */} <button onClick="send()">Send</button> </div>

为什么 HTML 不是合法的 JSX

JSX 形似 HTML，但会被编译成 JavaScript，因此存在若干差异：与 JavaScript 保留字冲突的属性需要改名，最典型的是 class 改为 className、for 改为 htmlFor；多词属性改为小驼峰，而 data- 和 aria- 属性保留连字符；内联 style 必须是对象而非字符串；img、br 等空元素必须显式自闭合；注释要写成 JavaScript 表达式；字面花括号需要转义；多个并列根节点需要 Fragment 包裹。本工具用自带解析器实现全部规则，结果是确定的，而不是依赖浏览器 DOM 的自动修复。

如何使用HTML 转 JSX — 粘贴标记直接生成 React

1在工具区域粘贴、输入或上传需要处理的内容。
2根据任务选择格式、尺寸、输出方式或校验选项。
3检查预览结果、提示信息或转换后的数据。
4确认结果无误后复制或下载，并用于后续工作。

HTML 转 JSX — 粘贴标记直接生成 React的常见使用场景

快速完成日常任务

无需安装桌面软件，打开网页即可处理常见的文本、图片、数据或格式转换任务。

检查与整理内容

在提交文件、发布内容或复制结果之前，快速发现格式问题并获得结构清晰的输出。

注重隐私的浏览器处理

对于支持本地运行的工具，数据会留在当前浏览器中，不需要上传到第三方服务。

常见问题

为什么 data- 和 aria- 属性保持原样？

React 会把它们原样传给 DOM，因此保留连字符。只有 React 定义了对应小驼峰属性的那些属性才会改名，所以 data-test-id 不变，而 tabindex 会变成 tabIndex。

内联事件处理器会怎样处理？

onclick 这类属性会改名为 onClick，但取值仍是字符串。这是有意为之：字符串在 React 中不是合法的处理器，保留原值可以让剩余工作一目了然，而不是凭空造出一个未必匹配你代码的函数。

为什么我的标记被 <> 和 </> 包住了？

JSX 表达式必须只有一个根节点。当输入包含多个顶层元素时，转换器会加上 Fragment 以保证可编译。如果你只需要一个根节点，请单独转换该元素。

它能处理格式不规范的 HTML 吗？

它会像浏览器一样忽略多余的闭合标签，但对未闭合的标签和注释会明确报错而不是猜测。它没有实现完整的 HTML5 树构建算法，因此刻意损坏的标记可能需要先行清理。

工具操作区