HTML 转 JSX

HTML 转 JSX: 用途

粘贴 HTML 即刻完成转换：class 和 for 变成 className 和 htmlFor，tabindex、maxlength 和 autocomplete 等属性改为驼峰，style 变成对象，布尔属性不再带值，空标签加上斜杠，注释变成 {/* */}。行内事件会变成函数，原来的代码以注释保留。

data- 和 aria- 属性保持原样，SVG 属性也会被转换。勾选“生成组件”，即可得到以你所选名称命名的现成函数。

使用方法

1. 粘贴 HTML。
2. 如需现成的函数，勾选“生成组件”。
3. 把 JSX 复制到你的 React 项目中。

使用场景

• 把 HTML 模板迁移到 React 和 Next.js 项目。
• 把 SVG 图标转换为组件。
• 改造从其他网站复制的代码片段。

常见问题

从 HTML 到 JSX 有哪些变化？

class 变成 className，for 变成 htmlFor；带连字符的属性和事件属性改为驼峰（tabindex 变成 tabIndex，onclick 变成 onClick）；style 变成对象（如 {{ marginTop: 8 }}）；没有闭合的标签（img、br、input）会加上斜杠；注释变成 {/* */}。

data- 和 aria- 属性会变吗？

不会。data-* 和 aria-* 在 JSX 中保持不变，仍带连字符。

onclick 里的 JavaScript 怎么办？

行内事件的内容会被转换为注释，因为在 React 中事件接收的是函数。请把该操作重写为组件中的函数。

支持 SVG 吗？

支持。stroke-width、fill-rule 和 xlink:href 这类 SVG 属性会变成 strokeWidth、fillRule 和 xlinkHref。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具