react18-string-refs

React 18 字符串 Ref 迁移

字符串 ref（ref="myInput" + this.refs.myInput）在 React 16.3 中已被弃用，在 React 18.3.1 中会发出警告，并在 React 19 中被移除。

快速模式对照表

模式	参考
DOM 元素上的单个 ref	→ patterns.md#single-ref
单个组件中的多个 ref	→ patterns.md#multiple-refs
列表中的 ref / 动态 ref	→ patterns.md#list-refs
回调 ref（替代方案）	→ patterns.md#callback-refs
传递给子组件的 ref	→ patterns.md#forwarded-refs

扫描命令

# 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\."

两者应一起迁移 - 将每个组件的 ref="name" 和 this.refs.name 访问作为一对来查找。

迁移规则

每个字符串 ref 都迁移到 React.createRef()：

1. 添加 refName = React.createRef(); 作为类字段（或在构造函数中）
2. 在 JSX 中将 ref="refName" → ref={this.refName}
3. 在所有地方将 this.refs.refName → this.refName.current

阅读 references/patterns.md 了解每种情况的完整前后对比。