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' }}` 对象字面量。
—
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>` 标签像其它元素一样作为文本通过。转换纯粹是字符串级别的。