HTML 转 JSX 转换器

包装为组件

组件名称

HTML

JSX

什么是 HTML 转 JSX？

JSX 是 React 组件中使用的类 HTML 语法。虽然它看起来像 HTML，但有几个重要区别：class 变为 className，for 变为 htmlFor，内联样式使用 JavaScript 对象而非字符串，所有标签必须自闭合，事件处理器使用 camelCase。本工具自动处理所有这些转换，让您可以直接粘贴 HTML，获得可在 React 组件中即用的有效 JSX。

如何使用 HTML 转 JSX 转换器

在左侧面板粘贴 HTML 代码（或点击「示例」加载样例）。
右侧立即显示 JSX 输出结果。
可选开启「包装为组件」，获取完整的可直接粘贴的函数组件。
点击「复制 JSX」按钮复制结果。

常见问题

在这里解码敏感数据是否安全？ 是的。所有解码都在您的浏览器中使用JavaScript进行。没有数据被传输到任何服务器，因此您的编码字符串完全保持私密。

Base64和URL安全Base64之间的区别是什么？ 标准Base64使用+和/字符，这些是URL中的特殊字符。URL安全Base64将其替换为-和_，这样字符串可以在URL和文件名中安全使用，无需进行百分比编码。

为什么我解码的输出看起来像乱码？ 如果原始数据是二进制文件（如图像、PDF或压缩文件），解码的输出将不是可读文本。在这种情况下，Base64字符串代表二进制文件，而不是文本字符串。

Base64是一种加密形式吗？ 不是。Base64是编码方案，不是加密。任何人都可以在没有密钥的情况下解码Base64字符串。它不应该用于保护敏感数据——应使用适当的加密。

Keywords: HTML 转 JSX, HTML JSX 转换器, HTML 转 React, className 转换, JSX 在线工具, React JSX 转换, HTML JSX 在线转换