HTML 转 JSX：面向 React 的完整转换指南

为什么 HTML 需要转换才能用于 React

JSX 看起来像 HTML，但遵循的是 JavaScript 语法规则。React 使用 JSX 来描述 UI 结构，虽然它与 HTML 相似，但一些属性和写法存在差异。将原始 HTML 直接粘贴到 React 组件中，通常会导致编译错误或意外行为。

最常见的差异包括：属性命名（class 变为 className，for 变为 htmlFor）、内联样式语法（字符串变为使用 camelCase 属性的对象）、自闭合标签（每个空元素都必须自闭合），以及事件处理器命名（onclick 变为 onClick）。转换器可以自动完成这些繁琐的变换。

会转换哪些内容

CheckTown 的 HTML 转 JSX 转换器可处理 HTML 与 JSX 语法之间的所有标准变换。

• 属性重命名——class 转为 className、for 转为 htmlFor、tabindex 转为 tabIndex，以及所有其他 React 专用的属性名
• 样式字符串解析——带有 CSS 字符串的内联 style 属性会被转换为 JavaScript 样式对象，属性名采用 camelCase，值为字符串
• 自闭合标签——诸如 <img>、<br>、<hr> 和 <input> 之类的元素会被转换为 <img />、<br />、<hr />、<input />
• 布尔属性——checked、disabled、readonly 会被转换为对应的 JSX 写法

将 HTML 转换为 JSX 时的常见陷阱

即使使用了自动转换，仍有一些写法在初次变换后需要手动关注。

• HTML 注释会被转换为 JSX 注释语法——请检查嵌套注释是否会导致问题
• 诸如 stroke-width 和 fill-opacity 之类的 SVG 属性在 JSX 中使用 camelCase（strokeWidth、fillOpacity）——请仔细核查包含大量 SVG 的内容
• 带有 JavaScript 字符串的内联事件处理器（onclick="alert()"）需要手动转换为 JSX 箭头函数处理器
• HTML 实体可能需要转换为 Unicode 字符或 JSX 表达式

常见问题解答

对所有 HTML 而言，转换的准确率能达到 100% 吗？

转换器能够准确处理标准的 HTML 转 JSX 属性映射、样式解析和自闭合标签。不过，诸如内联 JavaScript 事件处理器、嵌入式脚本或非标准属性之类的复杂写法，可能在转换后仍需手动调整。

我可以转换带有动态数据的 HTML 模板吗？

转换器处理的是静态 HTML 标记。来自其他框架的模板语法（如 Angular 的 *ngFor 或 Vue 的 v-for）会被原样保留，但在 React 中无法工作。你需要手动将这些模板指令转换为 JSX 表达式。

转换器会处理 dangerouslySetInnerHTML 吗？

不会。转换器将 HTML 结构转换为 JSX 结构。如果你需要在 React 中渲染原始 HTML 字符串，则需自行使用 dangerouslySetInnerHTML。该转换器专为结构迁移而设计，而非运行时的 HTML 注入。