开发者 / React

HTML到JSX转换器

将HTML转换为用于React的JSX：将class转换为className，将内联样式转换为对象，补全空元素闭合标签，转义大括号和注释，并可选择包装在组件中。

HTML到JSX转换器: 工具会将HTML解析为元素，并将属性重命名为适用于React的写法（包括class、for、tabindex、readonly、maxlength等），将样式转换为使用camelCase键名的对象，并闭合<br>和<img>等空元素。文本中的大括号和尖括号会被转义，注释会转换为{/* */}，表单值会转换为defaultValue和defaultChecked，以便字段保持可编辑。测试页面的输出可编译为TSX。完全在浏览器中本地运行，文件不会上传到服务器。

类别: 开发者工具
使用次数: 在浏览器中
费用: 免费·无需注册
可用性: 可直接使用

HTML转JSX本地处理

完全在浏览器中运行

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

封装到组件中

已移除<button>上的onclick="send()"：请将其写成函数，例如onClick={() => …}。

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

React中的属性会重命名（class改为className，for改为htmlFor，tabindex改为tabIndex），样式会转换为对象，空元素和无内容元素会闭合，注释会转换为{/* */}，表单值会变为defaultValue，以便字段保持可编辑。

转换之后

将重复的标记转换为接收props的组件，把硬编码文本替换为大括号中的变量，并将内联样式移入CSS类或你的样式系统，因为每次渲染都会重新创建样式对象。

对于SVG图标，SVG到JSX会生成一个可传递props的组件；如需先移除注释和多余空白，请使用HTML压缩工具。

容易出错的差异

JSX需要一个根元素，因此多个元素会包在片段（<>…</>）中。每个元素都必须闭合，属性名采用camelCase；包含{或}的文本必须写成{"{"}，转换器会替你完成。

使用方法

粘贴HTML，内容可以是单个元素，也可以是整个页面区块。
可选择将结果包装在命名组件中。
复制JSX，并根据警告中列出的内容重写内联事件处理程序。

隐私与限制

HTML会在浏览器中转换，绝不会上传。

常见问题

为什么onclick属性会被删除？

在HTML中，它们是代码字符串；在React中，它们必须是函数。转换器会列出每个属性，方便你重写，例如将onclick="save()"改为onClick={save}。

为什么value会变成defaultValue？

在React中，value属性会使字段成为受控字段；如果没有onChange处理程序，就无法在其中输入内容。defaultValue会设置起始文本，同时保留编辑功能。

它支持SVG吗？

支持：stroke-width等SVG属性会转换为strokeWidth。对于转换为组件的完整SVG文件，SVG到JSX工具还会添加props。

免费工具·使用在浏览器中次·无需账户

JSX

转换之后

容易出错的差异

使用方法

隐私与限制

相关工具

常见问题