快速变身：HTML To React JSX
使用 htmltojsx 将 HTML 标记转换为 React JSX：class 变为 className，for 变为 htmlFor，行内样式变为样式对象，空元素标签会自闭合。多个根元素会被包在 fragment 中。
把静态 HTML 模板或表单迁移到 React 组件中。
HTML
JSX
适用场景
- 把静态 HTML 模板或表单迁移到 React 组件中。
- 把文档或 UI 组件库中的标记片段转换成可以粘贴到组件里的 JSX。
使用方法
- 将 HTML 粘贴到左侧编辑器。
- 可选：打开设置并开启 Create function component，将输出包装为 export const Foo = () => (...)。
- 复制 JSX，重命名组件，并把行内事件属性替换为 React 事件处理函数。
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>功能与限制
转换在浏览器中进行，输出使用 Prettier 格式化（不带分号）。
像 onclick="go()" 这样的行内事件属性会原样保留，不会转换为 onClick 处理函数。
布尔属性会得到空字符串，例如 disabled=""。React 会把 "" 视为 false，因此请改为 disabled 或 disabled={true}。
如果输入是 SVG，页面会提示改用 SVG 转 JSX。
FAQ
行内样式如何转换？
样式字符串会被解析为键名为 camelCase 的对象，像素值变为数字：style="margin-top: 4px" 会变为 style={{ marginTop: 4 }}。
HTML 注释会怎样处理？
会保留为 JSX 注释，例如 <!-- hint --> 会变为 {/* hint */}。
能给生成的组件命名吗？
不能。函数选项始终使用名称 Foo。请在复制后重命名。