SolidJS 中应将 HTML 字符串“翻译”为 JSX 表达式而非注入，优先服务端预处理为 JSON AST；动态 class 用 classList，style 传对象，data-* 直接绑定，列表用 ，条件用 ，第三方 JS 组件需重写响应式逻辑。
HTML 字符串怎么安全转成 SolidJS JSX 元素
不能直接用 innerhtml 或 v-html 那套逻辑——solidjs 没有内置的 html 字符串解析器，也**不推荐运行时解析 html 字符串**，否则会绕过响应式、丢失事件绑定，还可能引入 xss。
常见错误现象：createEffect(() => { el.innerHTML = htmlStr }) 看似渲染成功，但里面 onclick 不生效、props 不响应、onMount 钩子拿不到子节点。
- 真正该做的是：把 HTML 结构“翻译”成 SolidJS 的 JSX 表达式，而不是“注入”字符串
- 如果原始 HTML 来自 CMS 或用户输入，优先走服务端预处理（如转成 JSON AST），再在客户端用
For、Index、条件渲染等组合还原 - 极少数必须解析 HTML 字符串的场景（如富文本编辑器预览），用
dangerouslySetInnerHTML+ 手动绑定事件（需额外 DOM 查询和addEventListener）
SolidJS 里怎么处理 class / style / data-* 这类 HTML 属性
不是所有 HTML 属性都能原样照搬。SolidJS 响应式属性机制决定了：静态值可直接写，动态值必须用表达式，且部分属性名有 JS 化映射。
常见错误现象：<div class="{cls}"> 报错或不生效；<code><input value="{val}"> 变成只读；data-id="123" 在 props 中取不到。
-
class→ 用classList（对象语法）或classList+mergeProps处理动态类名，避免字符串拼接 -
style→ 必须传对象，如style={{ color: "red", fontSize: "14px" }}；CSS 变量要写成fontSize而非font-size -
data-*属性 → 直接写data-id={id}即可，SolidJS 会透传；但注意 SSR 时若值为 undefined，可能被忽略 -
value/checked→ 是受控组件核心，必须配onInput/onChange，否则输入即失焦
如何把 HTML 模板里的循环/条件逻辑迁移到 SolidJS
HTML 中靠 for、if 注释或后端模板语法实现的逻辑，在 SolidJS 里得用响应式原语重写，不是“加个 {} 就行”。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：用 {list.map(...)} 但没包 For 或 Index，导致更新时节点不复用、动画错乱；用 {cond && <div>...</div>} 但 cond 是信号未解包（漏了 ()）。
- 列表渲染优先用
<for each="{list()}">{item => <div>{item.name}</div>}</for>，它比map更高效，支持移动/插入/删除的细粒度更新 - 条件渲染用
<show when="{loading()}"><spinner></spinner></show>，比三元更语义化，且能自动清理副作用 - 嵌套结构别硬套 HTML 的缩进习惯——SolidJS 组件是函数调用，逻辑分层靠组件拆分，不是靠标签缩进
第三方 HTML 组件库（如 Bootstrap、Tailwind UI）能直接用吗
能挂载，但多数需要手动适配事件和响应式逻辑，不能当“黑盒”直接塞进去。
常见错误现象：Bootstrap 的 collapse 插件初始化后，SolidJS 状态变了，DOM 却不更新；Tailwind UI 的下拉菜单点击后不关闭，因为没接管 open 状态。
- 纯 CSS 库（如 Tailwind、Bootstrap CSS）完全兼容，样式类名照写，无需改动
- 带 JS 行为的组件（如 Bootstrap JS、Alpine.js 片段）必须剥离或重写——SolidJS 的响应式更新发生在 JS 层，不能依赖 MutationObserver 或定时轮询
- 推荐方案：用 SolidJS 封装一层轻量 wrapper，比如
useCollapse自定义 hook 替代data-bs-toggle，把 DOM 操作收口到onMount和信号变化中
迁移的本质不是“转换标签”，而是把 HTML 的静态描述，变成 SolidJS 的响应式数据流声明。最易被忽略的点是：那些原来靠浏览器默认行为兜底的地方（比如表单提交、锚点跳转、focus 管理），现在全得显式控制。
