转换 HTML 到 JSX 在线
转换 HTML 标记到 React-ready JSX — class→className, 样式 objects, self-closing tags.
最后更新：
转换 HTML 到 JSX 在线
使用这免费 HTML 到 JSX 转换器到快速 turn 标准 HTML 到 React-ready JSX.
粘贴您的 HTML, 点击转换到 JSX, 和复制已转换代码在秒.
工具自动处理常见 JSX 变化此类作为:
-
class→className -
for→htmlFor -
maxlength→maxLength -
readonly→readOnly - Inline CSS → JSX 样式 objects
- Self-closing HTML elements
- React-compatible SVG attributes
- 多个 root elements
- JSX 格式化
工作流是简单:
粘贴 HTML → 转换到 JSX → 复制 JSX
如何到转换 HTML 到 JSX
- 粘贴您的 HTML 到 HTML 输入编辑器.
- 点击转换到 JSX.
- 检查生成的 JSX.
- 检查任何转换不或 warnings.
- 点击复制 JSX 和粘贴它到您的 React 项目.
您可以也 load 样本代码到查看如何转换器工作.
HTML 到 JSX 示例
HTML
[object HTMLPreElement]JSX
[object HTMLPreElement]转换器保存您从手动 fixing 这些 React-特定 syntax 差异.
转换 class 到 className
HTML 使用:
[object HTMLPreElement]JSX 使用:
[object HTMLPreElement] 转换器变化实际 HTML attribute safely 而不是的 blindly replacing 每 occurrence 的词 class.
转换 Inline 样式到 JSX
HTML inline 样式使用一 CSS 字符串:
[object HTMLPreElement]JSX 使用一 JavaScript object:
[object HTMLPreElement]与 inline-样式转换 enabled, CSS properties 此类作为 background-color 是已转换到 React-friendly camelCase 名称此类作为 backgroundColor.
Fix Self-Closing Tags
HTML 经常允许:
[object HTMLPreElement]JSX 需要:
[object HTMLPreElement]工具自动 fixes 常见 empty elements 用于 JSX.
转换 SVG 到 JSX
SVG 标记经常包含 attributes 那需要 React-compatible 名称.
例如：
[object HTMLPreElement]变为:
[object HTMLPreElement]这使转换器有用用于 SVG icons, illustrations, 和代码 exported 从设计工具.
转换 HTML 到一 React Component
Enable React Component 模式如果您想要已转换标记 wrapped inside 一 reusable function component.
输入:
[object HTMLPreElement]输出:
[object HTMLPreElement]您可以也选择您的自己的 component name.
有用用于 React 和下一个.js 开发者
这 HTML 到 JSX 转换器是有用何时工作与:
- Static HTML 网站
- Bootstrap templates
- Landing 页面
- Legacy front-结束项目
- React components
- 下一个.js 项目
- SVG 标记
- UI templates
- 设计-工具 exports
而不是的手动正确 dozens 的 attributes, 您可以转换标记第一和然后 focus 在 props, state, components, 和应用 logic.
Helpful 转换 Feedback
一些 HTML cannot 是已转换 perfectly 无理解 JavaScript 大约它.
用于示例, inline HTML 事件 handlers 可能需要手动检查.
如果工具检测 potentially incomplete 或 unusual 标记, 它提供一 warning 而不是比 silently 返回一 empty 结果.
这是尤其 helpful 何时工作与已复制 templates 或 older HTML.
为什么使用一 HTML 到 JSX 转换器?
手动转换变为 repetitive 何时工作与大 HTML snippets.
这工具帮助减少工作此类作为:
- Replacing HTML attributes
- Fixing self-closing tags
- 转换 inline 样式
- 更新 SVG properties
- 格式化 nested 标记
- Wrapping 多个 root elements
- 准备 React components
那使它有用用于两者 experienced React 开发者和 beginners learning JSX.
常见问题
什么是一 HTML 到 JSX 转换器?
它转换标准 HTML 标记到 syntax 那可以是已使用 inside React components.
什么会 class 变成在 JSX?
class 变为 className.
什么会 for 变成在 JSX?
for 变为 htmlFor.
可以它转换 inline CSS?
是. Inline CSS 可以是已转换到 JSX-compatible 样式 objects.
会它支持 SVG?
是. 常见 SVG attributes 可以是已转换到 React-compatible camelCase properties.
可以我转换 HTML 到一完整 React component?
是. Enable React Component 模式到 wrap JSX inside 一 exported function component.
可以我使用结果在下一个.js?
是. 生成的 JSX 可以是已使用作为一起始点在下一个.js components.
做我需要到 sign 上?
否. 您可以转换 HTML 到 JSX 无创建一账户.
转换 HTML 到 JSX 现在
粘贴您的 HTML 到编辑器, 点击转换到 JSX, 和复制您的 React-ready 输出.
是否你是 migrating 一 static 页面, 转换一 Bootstrap template, 准备 SVG 代码, 或 building 一 React 或下一个.js 项目, 这工具帮助您移动从 HTML 到 JSX 更快.