HTML 转 JSX 转换器

在你的浏览器中，将 HTML 转换为有效的 React JSX——class 变成 className，空标签自闭合，行内样式变成 style 对象。你的标记都留在你的设备上。

HTML 转 JSX 转换器完全在你的浏览器中运行。你粘贴的标记会在你的设备上被解析和转换，绝不会上传到 ArrayKit。

打开 HTML 格式化工具

关于 HTML 转 JSX 转换器

HTML 转 JSX 转换器会把一段 HTML 变成你可以直接放进 React 组件的 JSX。它会重命名 React 坚持要求的属性——class 变成 className，for 变成 htmlFor——把其余的改为驼峰式（tabindex → tabIndex，colspan → colSpan），并自闭合 br、img 和 input 等空元素，让标记合法。行内的 style="color:red" 字符串会被解析成属性为驼峰式的 style={{ color: 'red' }} 对象，HTML 注释会变成 JSX 注释。开启组件选项即可把所有内容包裹进一个导出的函数。它专为把一份设计、一个邮件模板或一个静态页面移植到 React 的开发者而打造。每次转换都在你的浏览器中运行——你粘贴的标记绝不会离开你的设备。

功能特性

如何使用 HTML 转 JSX 转换器

  1. 把你的 HTML 粘贴到左侧的输入框中
  2. 在右侧的输出面板中查看转换后的 JSX
  3. 开启「包裹进组件」并为它命名，以获得一个可直接使用的组件
  4. 复制 JSX 或将其下载为 .jsx 文件

示例

输入

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

输出

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for 变成 htmlFor，class 变成 className，tabindex 变成 tabIndex，而空元素 <input> 会自闭合。

常见错误与故障排除

常见问题

哪些 HTML 属性会被重命名为 JSX 形式？
class 变成 className，for 变成 htmlFor。许多全小写属性会被改为驼峰式——tabindex 转 tabIndex，colspan 转 colSpan，maxlength 转 maxLength，readonly 转 readOnly——而 data-* 和 aria-* 属性会原样保留。
它如何转换行内 style 属性？
一个 style="color: red; font-size: 12px" 字符串会被解析成一个 React style 对象 style={{ color: 'red', fontSize: '12px' }}，每个 CSS 属性都改为驼峰式。像 --brand 这样的 CSS 自定义属性和厂商前缀都会被保留。
它会自闭合像 <br> 和 <img> 这样的空元素吗？
会的。HTML 空元素——br、img、input、hr、meta、link、source 等——会以自闭合形式输出（<br />、<img … />），从而让 JSX 合法。空的非空元素也会被自闭合。
转换过程中 HTML 注释会怎样？
HTML 注释会被改写为 JSX 注释语法。如果注释文本包含一个星号加斜杠的序列，它会被拆开，以免提前闭合 JSX 注释而破坏你的构建。
它能把输出包裹进一个 React 组件吗？
开启「包裹进组件」并为它命名。工具会输出一个返回你 JSX 的导出函数，并把多个顶层元素包裹进一个 fragment，从而只有一个根元素。
它会转换 onclick 和其他行内事件处理器吗？
行内事件属性会被改为驼峰式——onclick 转 onClick，onchange 转 onChange——但其值仍是字符串。你仍需在你的组件中把该字符串替换为一个真正的处理器函数。

相关工具

全部 ArrayKit 工具