react18-string-refs

提供精确的迁移模式，将 React 字符串 ref（ref="name" + this.refs.name）迁移到类组件中的 React.createRef()。当迁移字符串 ref 使用时使用这项技能——包括单个元素的 ref、组件中的多个 ref、列表中的 ref、回调 ref，以及传递给子组件的 ref。在编写任何 ref 迁移代码前务必使用这项技能——尤其是列表中的多 ref 模式非常棘手，这项技能可防止最常见的错误。用于 React 18.3.1 迁移（字符串 ref 警告）和 React 19 迁移（字符串 ref 被移除）。

SKILL.md

--- frontmatter

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

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():

•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.current everywhere

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