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
1 つのコンポーネント内の複数の 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 を参照してください。