Loading...
Loading...
粘贴 HTML,在浏览器本地得到可用于 React 的 JSX。
JSX 看起来像 HTML,但不是 HTML:React 要 className 而不是 class、style 要对象而不是字符串、属性要驼峰。把原始 HTML 直接粘进 React 组件,会在十几个小地方出错。这个工具帮你把改写都做掉。
它用浏览器自带的解析器解析你的 HTML,再重新输出成 JSX:class 变 className、for 变 htmlFor、内联 style 变成驼峰属性的对象、事件等属性驼峰化、img/br 等自闭合标签正确闭合、HTML 注释变成 JSX 注释表达式。结果带缩进,可直接放进组件。一切都在本地运行,代码不离开浏览器。
class 变 className、for 变 htmlFor,这两个最容易踩坑。
style="color:red" 变成 style={{ color: 'red' }},属性驼峰、CSS 变量保留。
tabindex、maxlength、事件处理器等转成对应的 JSX 名称。
img、br、input 等正确闭合,JSX 不再报错。
HTML 注释变 JSX 注释,文本里多余的花括号自动转义。
用浏览器 DOM 解析,随打随转,不上传。
粘进组件前,先用一个父元素包住 JSX,因为 React 的 return 只能有一个根节点。
把 HTML 粘到左边面板。
JSX 会随打随出现在右边。
复制后放进你的 React 组件。
如果有多个根节点,加一个包裹元素或 Fragment。
把现成模板或片段转成组件,不用手改属性。
把设计工具或静态页的标记粘进来,得到可用的 JSX。
看清楚 React 改了哪些属性、style 怎么变成对象。
抓一段 HTML 示例,几秒变成 React 可用。
转换器用 DOMParser 构建真实 DOM 树,再遍历并把每个节点序列化成 JSX,应用属性名映射、style 字符串转对象、自闭合标签和注释转换。
所有解析和转换都在本地完成,标记不会发往任何服务器。
一次 DOM 解析加一次树遍历,所以 JSX 随打随更新。