react-component-dev

用途：为 React 组件开发提供可组合、可访问且结构清晰的实践模式，适用于创建新组件、重构现有组件或进行代码审查。主要能力：以组合优先于配置为原则，用 Props 实现定制；对渲染 DOM 元素的组件使用 forwardRef 转发 ref；遵循可访问性优先，覆盖键盘操作、屏幕阅读器和减少动效；保持跨组件的 Prop 模式一致。提供组件模板，使用 forwardRef、ComponentPropsWithoutRef、cn() 合并 className，并设置 displayName。Prop 设计建议始终包含 className、children 与其余原生属性透传；变体使用字面量联合类型而非多个布尔 prop；复杂定制可用 trigger、title、description、children、footer 等插槽。forwardRef 适用于渲染单一 DOM 元素、包裹其他 forwardRef 组件或需要 focus、尺寸测量、附加 ref 的场景；渲染多个根元素、纯逻辑 hook 或内部专用组件可跳过。文件组织采用 button/index.ts、button.tsx、button.test.tsx、use-button-state.ts 结构，index.ts 仅做纯再导出。无障碍检查涵盖可聚焦、焦点顺序、可见焦点、Escape 关闭、Enter/Space 激活按钮、方向键导航菜单，以及仅图标按钮使用 aria-label、加载时 aria-busy、可展开内容使用 aria-expanded 与 aria-controls，并支持 prefers-reduced-motion。状态管理建议 useState 处理 UI 状态、受控表单输入与短暂数据，派生值优先直接计算或 useMemo，复杂多字段用 useReducer 或自定义 hook。事件处理内部用 handleClick，对外用 onClick、onOpenChange、onValueChange，并组合调用用户回调。测试聚焦用户交互、可访问性、条件渲染与错误状态，避免测试实现细节、样式与第三方内部。反模式包括逐层透传 props、过早抽象通用容器组件、布尔 prop 泛滥。使用方式与限制：资料未提供安装命令、许可证、价格或平台信息，暂未提供。