Softonic

HTML 转 JSX 转换器

步 1 / 2

转换内容：class 转为 className、for 转为 htmlFor、内联样式转为 JSX 对象、自闭合空标签、移除 HTML 注释。

转换为 JSX

JSX 看起来像 HTML，但实际上并非如此：class 是 className，for 是 htmlFor，style 是对象而不是字符串，并且每个空标签都必须自闭合。粘贴 HTML，此转换器就会生成一次编译通过的 JSX，让您无需花十分钟排查编译错误，就能把营销页面搬进 React 组件。

如何将 HTML 转换为 JSX

  1. 1

    粘贴 HTML

    可以是一个组件的标记，也可以是完整的页面片段。

  2. 2

    转换

    工具会将 `class`、`for`、`readonly` 等属性重命名为 JSX 写法，并将内联样式转换为对象。

  3. 3

    查看 JSX

    输出结果可直接粘贴到 `.jsx` 或 `.tsx` 文件中。

  4. 4

    复制并粘贴

    代码使用单行表达式，因此可以很好地融入现有组件。

每个值得注意的 HTML 与 JSX 差异

JSX 不是 HTML。它是编译为 React.createElement() 调用的 JavaScript 表达式，因此属性名称遵循 JavaScript 约定。

转换器会自动处理最常见的重命名。下面的完整列表是您手写 JSX 时需要的参考。

属性重命名

HTML JSX 备注
class className class 在 JS 中是保留字
for htmlFor for 是保留字
tabindex tabIndex 驼峰式命名
readonly readOnly 驼峰式命名
contenteditable contentEditable 驼峰式命名
stroke-width (SVG) strokeWidth 驼峰式命名
xlink:href xlinkHref 冒号命名空间被扁平化
aria-label aria-label ARIA 保留连字符
data-* data-* data 属性保留连字符

style 属性

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

没有单位的数值会变成像素；百分比和 flex 这类无单位的值请保留为字符串。

自闭合空元素

HTML 允许 <br> 和 <input> 不带结束标签。JSX 要求 <br /> 和 <input />，每个元素都必须显式闭合。

注释

HTML 注释（<!-- -->）在 JSX 主体中无效。此转换器会将其删除；如需保留备注，请自行写成 {/* JavaScript 块注释 */}。

布尔属性

HTML: <input checked>（或 <input checked="checked">）

JSX: <input checked={true} /> 或直接写成 <input checked />。切勿传入字符串 “true”。

逃生通道

  • 不可信的 HTML 片段可以用 dangerouslySetInnerHTML={{ __html: ... }} 渲染，这个 API 故意做得难看，以劝阻大家使用。
  • 自定义 data-* 属性保持不变；非标准属性会原样传递，但在开发模式下可能触发 React 警告。

常见问题

stroke-width 之类的 SVG 属性在 JSX 中必须使用驼峰式命名（strokeWidth），并且每个标签都必须自闭合。转换器会自闭合 SVG 中的空标签，并将样式字符串中的属性名转为驼峰式，但不会重命名 SVG 属性；请手动将 stroke-width 改为 strokeWidth。对于一次性图标，最干净的做法是将图标保存为 SVG 文件，并通过 svgr 将其作为组件导入。

是的，JSX 和 TSX 都使用 className。唯一的例外是在 dangerouslySetInnerHTML 内部，原始 HTML 字符串会原样插入 DOM，因此保留 class。

不会。输出仅包含 JSX 片段，没有 export default function 包装器，也没有类型注解。请将其粘贴到您的 .jsx 或 .tsx 文件中，并自行添加 props、类型和包装器。class 仍会转换为 className，这正是 TSX 所期望的。

它们会原样传递，不做更改。转换器不会重命名事件处理器，因此请将 onclick 改为 onClick，并把字符串值替换为真正的函数，例如 onClick={() => doThing()}。您需要在组件作用域内定义 doThing 函数。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

邮箱验证器

验证邮箱地址：RFC 5322 语法检查、实时 MX 记录查询，并显示本地部分、域名和长度详情。不会发送任何邮件。

编辑器配置生成器

根据你的缩进样式与大小、行尾、字符集和空格规则生成 .editorconfig 文件，让不同集成开发环境（IDE）和编辑器的格式保持一致。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

此工具还提供其他语言版本