Testing & QAlow risk

react18-string-refs

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).

github/awesome-copilot·skills/react18-string-refs/SKILL.md

100/ 100质量分

↓

导入这个 Skill

选择你的 coding agent，复制项目级或个人级安装命令。

固定到平台收录的 commit

导入当前项目.agents/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a codex -y

导入个人环境~/.agents/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a codex -g -y

手动放置目录.agents/skills/react18-string-refsOfficial docs ↗

导入当前项目.claude/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a claude-code -y

导入个人环境~/.claude/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a claude-code -g -y

手动放置目录.claude/skills/react18-string-refsOfficial docs ↗

导入当前项目.agents/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a github-copilot -y

导入个人环境~/.copilot/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a github-copilot -g -y

手动放置目录.agents/skills/react18-string-refsOfficial docs ↗

导入当前项目.agents/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a cursor -y

导入个人环境~/.cursor/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a cursor -g -y

手动放置目录.agents/skills/react18-string-refsOfficial docs ↗

导入当前项目.agents/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a gemini-cli -y

导入个人环境~/.gemini/skills/react18-string-refs

npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/react18-string-refs -a gemini-cli -g -y

Native Gemini CLIgemini skills install https://github.com/github/awesome-copilot.git --scope workspace --path skills/react18-string-refs

手动放置目录.agents/skills/react18-string-refsOfficial docs ↗

⚠ 安装命令使用开源 skills CLI。执行前请检查来源、脚本和权限。

Skill 指令

在 GitHub 查看原始文件 ↗

# 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](references/patterns.md#single-ref) |
| Multiple refs in one component | [→ patterns.md#multiple-refs](references/patterns.md#multiple-refs) |
| Refs in a list / dynamic refs | [→ patterns.md#list-refs](references/patterns.md#list-refs) |
| Callback refs (alternative approach) | [→ patterns.md#callback-refs](references/patterns.md#callback-refs) |
| Ref passed to a child component | [→ patterns.md#forwarded-refs](references/patterns.md#forwarded-refs) |

## Scan Command

```bash
# 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()`:

1. Add `refName = React.createRef();` as a class field (or in constructor)
2. Replace `ref="refName"` → `ref={this.refName}` in JSX
3. Replace `this.refs.refName` → `this.refName.current` everywhere

Read `references/patterns.md` for the full before/after for each case.