react18-string-refs

Par github · awesome-copilot

Fournit les patterns de migration exacts pour les string refs React (`ref="name"` + `this.refs.name`) vers `React.createRef()` dans les composants class. Utilise cette skill lors de toute migration de string refs — y compris les refs sur un seul élément, les refs multiples dans un composant, les refs dans des listes, les callback refs, et les refs passées à des composants enfants. Utilise toujours cette skill avant d'écrire du code de migration de refs — le pattern de refs multiples dans une liste est particulièrement délicat et cette skill évite les erreurs les plus courantes. À utiliser pour la migration React 18.3.1 (string refs déclenchent des avertissements) et React 19 (string refs supprimées).

npx skills add https://github.com/github/awesome-copilot --skill react18-string-refs

Migration des String Refs React 18

Les string refs (ref="myInput" + this.refs.myInput) ont été dépréciées dans React 16.3, génèrent un avertissement dans React 18.3.1, et sont supprimées dans React 19.

Cartographie Rapide des Motifs

Motif	Référence
Ref unique sur un élément DOM	→ patterns.md#single-ref
Plusieurs refs dans un composant	→ patterns.md#multiple-refs
Refs dans une liste / refs dynamiques	→ patterns.md#list-refs
Callback refs (approche alternative)	→ patterns.md#callback-refs
Ref passée à un composant enfant	→ patterns.md#forwarded-refs

Commande de Scan

# Trouver toutes les attributions de string ref en JSX
grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Trouver tous les accesseurs this.refs
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

Les deux doivent être migrés ensemble - trouvez le ref="name" et les accès this.refs.name pour chaque composant en tant que paire.

La Règle de Migration

Chaque string ref migre vers React.createRef() :

Ajoutez refName = React.createRef(); comme champ de classe (ou dans le constructeur)
Remplacez ref="refName" → ref={this.refName} en JSX
Remplacez this.refs.refName → this.refName.current partout

Lisez references/patterns.md pour le détail avant/après de chaque cas.