AI导哈

前端开发

react18-string-refs

github/awesome-copilot

Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).

  • 741 次安装
  • 4.1万 星标
  • 收录于

安装命令

npx skills add https://github.com/github/awesome-copilot --skill react18-string-refs

SKILL.md

React 18 String Refs Migration

String refs (ref="myInput" + this.refs.myInput) were deprecated in React 16.3, warn in React 18.3.1, and are removed in React 19.

Quick Pattern Map

Pattern Reference
Single ref on a DOM element → patterns.md#single-ref
Multiple refs in one component → patterns.md#multiple-refs
Refs in a list / dynamic refs → patterns.md#list-refs
Callback refs (alternative approach) → patterns.md#callback-refs
Ref passed to a child component → patterns.md#forwarded-refs

Scan Command

# Find all string ref assignments in JSX
grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

相关 Skills

git-commitgithub/awesome-copilotUse this skill when the user wants to make a Git commit or split changes into more than one commit. Also use it when the user types "/commit" or asks for a conventional commit. The skill examines the diff, stages the related files, writes a Conventional Commits message, and runs git commit. Do not use it when the user wants only a commit message and no commit. Do not use it to push, open a pull request, rebase, or change the commit history.其他4.8万excalidraw-diagram-generatorgithub/awesome-copilotGenerate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.其他3.2万multi-stage-dockerfilegithub/awesome-copilotCreate optimized multi-stage Dockerfiles for any language or framework其他3万documentation-writergithub/awesome-copilotDiátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.其他2.8万prdgithub/awesome-copilotGenerate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.数据与研究2.4万refactorgithub/awesome-copilotSurgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.设计与多媒体2.2万