输入
正在准备工作区…
使用方法
- 粘贴 HTML 片段、打开 UTF-8 文件或载入“示例”。
- 选择缩进，然后点击“转换为 JSX”。
- 检查生成的标记，再复制或下载。
将 HTML 标记用于 React
从模板复制的 HTML 通常需要修改后才能放入 JSX。常见区别包括 className、htmlFor、自闭合元素以及内联样式的形式。
工具负责转换标记结构。组件状态、事件回调和应用逻辑仍需在使用生成 JSX 的位置自行编写。
属性与样式转换
HTML 属性会映射到 React 形式，包括 className 和 htmlFor。常见 SVG 属性使用 React 要求的大小写。
内联 CSS 转换为 style 对象，结果按 JSX 格式化。字面文本会按需转义，不会被当作 JavaScript 表达式。
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>简化的属性转换示例。完整输出会格式化，并包含 Fragment 包装。
结构与行为
HTML 片段会先解析再转换，输出在适当位置使用 Fragment 包装和自闭合语法。
script 元素和内联事件属性会被移除。这不会将其行为转换为 React 回调，也不保证剩余所有 URL 和样式都适用于你的应用。
整合结果
将 JSX 复制到组件的渲染或 return 表达式中。请手动恢复行为并检查内联样式，尤其是 style 对象无法完整表示的重复回退声明或 !important 规则。
文本输入最大 1 MiB。CSS 和 HTML 转换在工作线程中运行，限时 30 秒。颜色工具使用 sRGB；生成的样式仅供预览，需要在您的布局中测试。
常见问题
会生成完整 React 组件吗？
不会。工具仅生成 JSX 标记，组件外层、导入、数据和行为需要在项目中添加。
script 和 onclick 属性会怎样处理？
script 元素及内联事件属性会被移除，不会执行其代码，也不会翻译成 React 事件处理函数。
文本中的大括号为什么仍然显示为文本？
输入按 HTML 解析，字面大括号会为 JSX 转义，而非作为表达式求值。
内联样式能完全还原吗？
常见声明会转换为 React 样式属性。但 JavaScript style 对象不能始终忠实表示重复回退声明与 !important。
可以转换 SVG 标记吗？
常见 SVG 属性会映射为 React 名称。请在组件中测试输出，包括 ID、引用和应用特有属性。