复制安装命令
用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。
复制前请先查看来源、License 和安全提示。
SkillAtlasSkill 详情
react18-string-refs
Powered by Awesome Copilot GitHub contributors from allcontributors.org
审核状态：已审核Quality 80Security 80
项目 README
来源文件：README.md
🤖 Awesome GitHub Copilot
A community-created collection of custom agents, instructions, skills, hooks, workflows, and plugins to supercharge your GitHub Copilot experience.
[!TIP] Explore the full collection on the website → awesome-copilot.github.com
The website offers full-text search and filtering across hundreds of resources, plus the Learning Hub for guides and tutorials.
Using this collection in an AI agent? A machine-readable
llms.txtis available with structured listings of all agents, instructions, and skills.
📖 Learning Hub
New to GitHub Copilot customization? The Learning Hub on the website offers curated articles, walkthroughs, and reference material — covering everything from core concepts like agents, skills, and instructions to hands-on guides for hooks, agentic workflows, MCP servers, and the Copilot coding agent.
What's in this repo
| Resource | Description | Browse |
|---|---|---|
| 🤖 Agents | Specialized Copilot agents that integrate with MCP servers | All agents → |
| 📋 Instructions | Coding standards applied automatically by file pattern | All instructions → |
| 🎯 Skills | Self-contained folders with instructions and bundled assets | All skills → |
| 🔌 Plugins | Curated bundles of agents and skills for specific workflows | All plugins → |
| 🍳 Cookbook | Copy-paste-ready recipes for working with Copilot APIs | — |
Install a Plugin
For most users, the Awesome Copilot marketplace is already registered in the Copilot CLI/VS Code, so you can install a plugin directly:
copilot plugin install <plugin-name>@awesome-copilot
If you are using an older Copilot CLI version or a custom setup and see an error that the marketplace is unknown, register it once and then install:
copilot plugin marketplace add github/awesome-copilot
copilot plugin install <plugin-name>@awesome-copilot
Contributing
See CONTRIBUTING.md · AGENTS.md for AI agent guidance · Security · Code of Conduct
The customizations here are sourced from third-party developers. Please inspect any agent and its documentation before installing.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
📚 Additional Resources
- VS Code Copilot Customization Documentation - Official Microsoft documentation
- GitHub Copilot Chat Documentation - Complete chat feature guide
- VS Code Settings - General VS Code configuration guide
™️ Trademarks
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
开发与工程内容与创作Agent / MCP / Skill 创作
中风险
- 来源需自行核对维护者身份。
- 包含脚本或命令调用，安装前请复核。
- 未检测到明显外部权限要求。
- 未检测到高风险命令。
- 扫描发现：1 条。
Codex — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-string-refs" 文件夹复制到 Codex 的 skills 目录中。
- 重启 Codex 让新的 skill 生效。
Codex — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Codex 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Codex 让新的 skill 生效。
Claude Code — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-string-refs" 文件夹复制到 Claude Code 的 skills 目录中。
- 重启 Claude Code 让新的 skill 生效。
Claude Code — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Claude Code 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Claude Code 让新的 skill 生效。
Cursor — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-string-refs" 文件夹复制到 Cursor 的 skills 目录中。
- 重启 Cursor 让新的 skill 生效。
Cursor — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Cursor 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Cursor 让新的 skill 生效。
GitHub Copilot — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-string-refs" 文件夹复制到 GitHub Copilot 的 skills 目录中。
- 重启 GitHub Copilot 让新的 skill 生效。
GitHub Copilot — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 GitHub Copilot 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 GitHub Copilot 让新的 skill 生效。
Windsurf — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-string-refs" 文件夹复制到 Windsurf 的 skills 目录中。
- 重启 Windsurf 让新的 skill 生效。
Windsurf — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Windsurf 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: react18-string-refs
description: '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).'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\."
# Find all this.refs accessors
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
Both should be migrated together - find the ref="name" and the this.refs.name accesses for each component as a pair.
The Migration Rule
Every string ref migrates to React.createRef():
- Add
refName = React.createRef();as a class field (or in constructor) - Replace
ref="refName"→ref={this.refName}in JSX - Replace
this.refs.refName→this.refName.currenteverywhere
Read references/patterns.md for the full before/after for each case.
评论 (0)
暂无评论，成为第一个评论者吧！