SuperAPI AI 工具集

docs-sandpack

通用与其它

查看项目

更新于 10-16 01:12

技能介绍

用途:为 React 文档添加可交互的 Sandpack 代码示例,并统一示例的写法与风格。

主要能力:提供单文件快速模板;支持多文件示例、外部依赖(通过 package.json)、CSS、行高亮(如 {2-4})、编号代码引用([[1, 4, "age"]])与预期错误标注(expectedErrors)。文件命名支持主文件、src/FileName.js 支持文件、active 活动文件、hidden 隐藏文件等标记。

使用方式:在 MDX 中用 <Sandpack> 包裹代码块,主文件必须 export default。需要外部 npm 包或特定 React 版本时加入 package.json 并标记 hidden;用 active 指定初始聚焦文件。修改带行高亮的示例后必须同步更新行号,否则会渲染崩溃。

代码风格要求:组件用函数声明而非箭头函数;事件参数用 e;JSX 用单引号;默认 const;解构加空格;createRoot 分两行;if 语句用多行大括号;列表必须带 key;避免水合不匹配,非渲染状态用 useRef;forwardRef 与 memo 使用具名函数。

适用场景:React 文档中的计数器、表单、Context、自定义 Hook 等教学示例。

限制:单文件建议少于 200 行,多文件总计 150–300 行;行宽散文约 80 字符、代码约 60–70 字符;package.json 等配置文件应隐藏。其余细节暂未提供。