design / 可用工具

原生 DOM 复制进 React 强行补丁刷

将诸如 `class=`、`for=` 以及没有闭合短标签的灾难级原生大段 HTML,自动重整为完美的 `className`、`htmlFor` 及全部自闭合就位等待提交的 React 标准 JSX。

DesignReactHTMLConverter

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接,或者在支持的设备上直接调用系统分享。

Code / Frontend

HTML 反转 JSX 语法法官

将诸如 `class=`、`for=` 以及没有闭合短标签的灾难级原生大段 HTML,自动重整为完美的 `className`、`htmlFor` 及全部自闭合就位等待提交的 React 标准 JSX。

Raw HTML String
React JSX

使用场景

  • 引入一整套从老模板拷贝的前端区块源码,一次性洗净转换为模块可读的规范 React JSX 节点组。

如何使用

  1. 1. 同时支持清理 inline `<div style="text-align: center">` 并包裹重配成对象字面量表现层。

示例输入输出

HTML

<img src="a" class="b">

JSX

<img src="a" className="b" />

FAQ

会重写 script 标签吗

仅仅作用于 DOM 视图层语法合法化。不支持转化前端框架逻辑。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具,减少重复搜索。

CSS 单块转 Tailwind 类

陈旧样式向 Utility Class 原则转换器

可用

复制一段别人的远古 `.class { display: flex; margin-top: 16px; }`,它将会使用正则探针嗅探尽量匹配还原成 Tailwind 的 `flex mt-4` 紧凑类。

Design Tailwind Converter