SuperAPI AI 工具集

solid-syntax-jsx

写作与研究

查看项目

更新于 10-15 22:18

技能介绍

用途:在编写 SolidJS 的 JSX 模板、列表渲染、条件渲染或使用控制流组件时提供规范指导,避免把 React 的写法(三元表达式、Array.map、switch/case、key 属性)带入 SolidJS。

主要能力:说明 SolidJS 的 JSX 编译模型——JSX 编译为直接 DOM 创建调用,没有虚拟 DOM,组件只在初始化时执行一次,{} 中的动态表达式自动包裹为响应式 effect 做局部 DOM 更新。提供控制流组件速查:<Show>(when、fallback、keyed)、<For>(each、fallback)、<Index>(each、fallback)、<Switch>/<Match>(fallback / when)、<Dynamic>(component,来自 solid-js/web)、<Portal>(mount、useShadow、isSVG)、<Suspense>(fallback)。还列出命名空间属性前缀:attr:、prop:、class:、on:、use:、bool:、@once。

使用方式:按场景选择组件。对象数组、会重排或增删移动的列表用 <For>,按引用键控;原始值数组、位置重要的表单输入用 <Index>,按索引键控。注意回调签名相反:<For> 的 item 是直接值、index 是信号需 index() 调用;<Index> 的 item 是信号需 item() 调用、index 是普通数字。条件渲染用 <Show> 配 fallback,多分支用 <Switch>/<Match>,动态组件或元素用 <Dynamic>,脱离 DOM 树渲染用 <Portal>,异步资源用 <Suspense>。样式对象用双花括号与 kebab-case 属性名;属性按声明顺序求值,后者覆盖前者。

适用场景:SolidJS 组件模板编写、条件与列表渲染、弹窗挂载、异步加载占位等。

限制与警告:不要用 Array.map 渲染列表,不要用三元表达式做复杂条件渲染,不要在组件体内用 switch/case 或提前 return 做条件视图,不要给列表项传 key(SolidJS 会忽略)。Portal 仅客户端,禁用 hydration;事件沿组件树而非 DOM 树传播。具体 API 签名与示例见其 references 目录及 SolidJS 官方文档。