哪些属性会被改名？

所有 React 会改名的：`class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`，以及所有 `on…` 事件处理。`aria-` 和 `data-` 属性保持 kebab-case。

我的内联 style 里有 CSS 变量怎么办？

以 `--` 开头的属性会作为字符串键引号包裹（`'--accent': 'blue'`），从而在 JSX 中保留。`-webkit-…` 这样的厂商前缀属性也会被引号包裹。

会执行我的 JavaScript 或 eval 脚本吗？

不会。解析器是一个小的手写扫描器 — ` ` 标签像其它元素一样作为文本通过。转换纯粹是字符串级别的。

HTML → JSX 转换

把 HTML 移植成 React 组件的琐碎活儿都自动化的手写转换器：属性名改写（`class`、`for`、`tabindex` 等）、内联事件处理首字母大写（`onclick → onClick`）、void 标签自闭合（`<br>` → `<br />`）、HTML 注释转 JSX 注释，以及可选把 `style="color: red; font-size: 14px"` 转为 `style={{ color: 'red', fontSize: '14px' }}` 对象字面量。

—

用 <> 片段包裹把 style 字符串转为对象void 标签自闭合（<br />、<img /> 等）

HTML

JSX

<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

带引号的字符串属性值保持为字符串；如需 JS 表达式，复制后在 JSX 中改。

使用方法

粘贴 HTML 片段。
若 React 组件需要单一根，切换 fragment 包裹选项。
把 JSX 复制到你的组件文件。

常见问题

哪些属性会被改名？: 所有 React 会改名的：`class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`，以及所有 `on…` 事件处理。`aria-` 和 `data-` 属性保持 kebab-case。
我的内联 style 里有 CSS 变量怎么办？: 以 `--` 开头的属性会作为字符串键引号包裹（`'--accent': 'blue'`），从而在 JSX 中保留。`-webkit-…` 这样的厂商前缀属性也会被引号包裹。
会执行我的 JavaScript 或 eval 脚本吗？: 不会。解析器是一个小的手写扫描器 — `<script>` 标签像其它元素一样作为文本通过。转换纯粹是字符串级别的。

HTML → JSX 转换

使用方法

常见问题

相关工具

CSS 转 JS 样式对象转换器

JSON 转 Kotlin 数据类转换器

JSON 转 C# 类转换器

JSON 转 Java 类(POJO)转换器

EditorConfig 生成器

HTML 实体编码 / 解码