SuperAPI AI 工具集

react-fieldguide

前端与建站

查看项目

更新于 10-16 03:13

技能介绍

用途:在使用 TypeScript 构建 React 组件、为 Hook 编写类型、处理事件,或涉及 React 19、Server Components、TanStack Router 时使用。不适用于非 React 的 TypeScript 或纯 JS React。

主要能力: 组件类型:用 ComponentPropsWithoutRef 扩展原生元素;用 ReactNode、ReactElement 标注 children 与 render prop;用可辨识联合处理 variant 属性。 事件处理:使用具体事件类型,如 React.MouseEvent<HTMLButtonElement>、React.FormEvent<HTMLFormElement>、React.ChangeEvent<HTMLInputElement>、React.KeyboardEvent<HTMLInputElement>。 Hook 类型:useState 对联合类型与 null 显式标注;useRef 区分 DOM(null)与可变值;useReducer 用可辨识联合定义 action;自定义 Hook 返回值用 as const;useContext 配合 null 检查。 泛型组件:用 keyof T 与 render prop 实现 Table 等泛型组件,用 T extends HasId 约束必需属性。 React 19:ref 作为普通 prop(替代 forwardRef);useActionState 替代 useFormState;use() 解包 Promise/context;涉及 useOptimistic、useTransition 与迁移清单。 Server Components:异步数据获取;'use server' 定义 Server Actions;use() 处理 Promise 交接;useActionState 配合表单。 TanStack Router:createRoute 定义路由,用 Zod 校验搜索参数;useLoaderData、useSearch、useParams 等类型化 Hook;类型安全导航。

用法要点与限制:遵循列出的推荐与禁止实践,如事件处理器不用 any、children 不用 JSX.Element、React 19 起不用 forwardRef、不用 useFormState、不混用 Server/Client 组件、传给 use() 的 Promise 不要 await。配套参考文件包括 hooks.md、event-handlers.md、react-19-patterns.md、generic-components.md、server-components.md、tanstack-router.md。安装方式、收费与平台支持资料中暂未提供。