DevSexy 代码海关 · 每个属性都要申报
长得像 JSX，不代表已经越过 React 的边界。
HTML 和 SVG 都与 JSX 相似，但属性名、style、命名空间、事件以及外层结构遵循不同约定。转换器负责机械改写，并把需要你决定的行为和组件接口留在明处。
HTML 通道
<label class="field" for="email">
- DOM 属性名
- 空元素闭合
- 表单关联
SVG 通道
<path stroke-width="2" fill-rule="evenodd">
- 绘图属性改为驼峰
- ID 与 URL 引用
- ARIA 保持连字符
转换清单
每一次改写都应当看得见。
classclassName已重命名使用 React DOM 属性
forhtmlFor已重命名保留 label 与控件的关联
stroke-widthstrokeWidth已重命名符合 SVG prop 大小写
aria-labelaria-label已保留ARIA 属性拼写不变
data-test-iddata-test-id已保留保留自定义 data 约定
onclick="save()"data-devsexy-review-onclick已隔离行为需要接入真实函数
简单内联 style 实验台
CSS 声明字符串会变成 JavaScript 对象。
HTML attribute
style="font-size: 14px; --brand: #bfd456; line-height: 1.4"
React style prop
style={{ fontSize: "14px", "--brand": "#bfd456", lineHeight: "1.4" }}font-sizefontSize属性名改为驼峰--brand"--brand"CSS 自定义属性继续带引号14px"14px"单位明确保留1.4"1.4"转换器不猜测数值语义事件处理器隔离区
带行为的字符串，不会被冒充为可信函数。
HTML 事件属性是在全局字符串作用域中执行的，React 则需要连接应用状态和依赖的函数引用。Worker 不会执行这些字符串，而是把原值保存在 data-devsexy-review-* 属性中；输入里的 script 元素会被移除。
Incoming behavior string
<button onclick="checkout(cart)">Buy</button>
Quarantined evidence
<button data-devsexy-review-onclick="checkout(cart)">Buy</button>
人工确认后替换：onClick={() => checkout(cart)}
外层结构约定
先决定代码归谁管理，再决定文件扩展名。
Fragment
<>…</>组合一个或多个根节点，不额外增加 DOM 元素。
JSX 组件
export function Badge()使用 JavaScript 语法；props 仍由你的组件接口决定。
TSX 组件
(): React.JSX.Element只增加返回类型，不会凭空生成 props 类型。
组件名称
大写标识符React 会把小写名称视为内置元素。
转换后的编译闸门
拿到代码，只是接入工作的开始。
01
解析 JSX / TSX
输出必须能通过目标项目的工具链。
02
阅读转换清单
检查被隔离的事件和不认识的属性。
03
实际渲染
核对标签、ID、渐变、mask 和表单关联。
04
补齐行为与类型
接入真实函数、状态、props、imports 和领域类型。
05
运行 lint 与测试
最终以 React 警告和交互测试为准。