forwardRef: Eksponering af DOM-referencer for forældre

En ref er en måde at holde en reference til en DOM-node eller komponentinstans på, som bevares mellem gengivelser uden at udløse nye gengivelser. Du knytter en ref til med attributten ref, og React udfylder dens current-egenskab, efter at ændringerne er lagt i DOM'en.

Ulempen er, at du ikke kan knytte en ref til en funktionskomponent på samme måde som til en div. Som standard har en forælder ingen måde at nå den DOM-node, der ligger inde i en underkomponent, fordi refs ikke videresendes som almindelige props.

React.forwardRef lader en komponent modtage en ref fra sin forælder og videresende den til et af sine egne elementer. Den indpakker din komponentfunktion og ændrer funktionssignaturen, så ref kommer ind som et andet argument sammen med props.

Dette er den officielle udvej til at eksponere en indre DOM-node for en kaldende komponent og gøre en ellers uigennemsigtig underkomponent til en komponent, hvis element forælderen kan referere direkte til.

Den indpakkede funktion tager to parametre: (props, ref). Det første er det sædvanlige props-objekt, og det andet er den videresendte ref. Derefter spreder eller knytter du denne ref til det element, du vil eksponere, f.eks. ref={ref} på et indre inputfelt.

Husk, at kun komponenter, der er indpakket med forwardRef, modtager dette andet argument. En almindelig funktionskomponent, der angiver ref som andet parameter, modtager blot undefined.

Det klassiske eksempel er en genanvendelig tekstfeltkomponent, hvis indre inputfelt du vil lade en forælder fokusere. Ved at indpakke feltet i forwardRef og knytte den videresendte ref til det underliggende inputelement kan forælderen kalde focus direkte på det.

Det holder feltkomponenten genanvendelig, samtidig med at der gives kontrolleret imperativ adgang præcis dér, hvor det er nødvendigt, f.eks. når det første felt i en formular skal fokuseres ved montering.

Videresendte refs muliggør også måling. En forælder kan aflæse offsetWidth og offsetHeight eller kalde getBoundingClientRect på et underkomponentelement, som den har modtaget gennem forwardRef.

Det er nyttigt til værktøjstip, pop op-paneler og layoutberegninger, hvor forælderen skal kende den nøjagtige gengivne størrelse eller placering af et indre element, før den beslutter, hvordan noget skal placeres i forhold til det.

Fordi den videresendte ref peger på en ægte DOM-node, kan forælderen kalde indbyggede DOM-metoder på den. Et kald til scrollIntoView på et videresendt listeelement bringer det jævnt ind i synsfeltet, og scrollTo på en videresendt rullebeholder flytter dens indhold.

Det er imperative handlinger, som ikke har en ren deklarativ ækvivalent, og det er netop den slags interaktion, refs er beregnet til at håndtere.

Nogle gange ligger det element, du vil eksponere, flere komponenter nede. Du kan kæde forwardRef sammen, så hvert mellemliggende lag videresender den ref, det modtager, til det næste lag, indtil den til sidst lander på den ønskede DOM-node.

Hver indpakning i kæden skal selv bruge forwardRef og sende ref videre, fordi en almindelig komponent i midten ville bryde forbindelsen.

forwardRef og React.memo kan kombineres for at få både ref-videresendelse og memoisering af gengivelsen. Den sædvanlige rækkefølge er memo(forwardRef(Component)), hvor resultatet fra forwardRef indpakkes, så memo-sammenligningen stadig anvendes.

Dette mønster forekommer i ydeevnefølsomme designsystemer, hvor en komponent, der gengives ofte, både skal eksponere sin node og undgå unødvendige gengivelser.

I React DevTools vises en forwardRef-komponent med etiketten ForwardRef omkring komponentens navn. Det gør det nemt med et hurtigt blik at bekræfte, at en komponent deltager i ref-videresendelse.

Du kan give den indre funktion et navn eller angive et displayName for at gøre posten i DevTools tydeligere end en generisk anonym ForwardRef-etiket.

forwardRef bruges til at eksponere DOM-noder og imperative håndtag, ikke til at videregive data. Hvis en forælder skal påvirke en underkomponent, bør du foretrække almindelige props og state frem for at trænge ind gennem en ref.

Overdreven brug af refs kobler komponenter tæt sammen og omgår Reacts dataflow, så adfærden bliver sværere at følge. Brug kun forwardRef, når en deklarativ prop reelt ikke kan udtrykke interaktionen.

forwardRef er fortsat det almindelige værktøj til at eksponere refs i komponentbiblioteker og genanvendelige inputfelter. Nyere React-versioner bevæger sig i retning af at lade ref blive videregivet som en almindelig prop, men forwardRef bruges stadig bredt og er vigtig at forstå.

Et godt kendskab til den forbereder dig både på eksisterende kodebaser og på de underliggende mekanismer, som enhver fremtidig syntaks med ref som prop bygger på.

forwardRef løser begrænsningen, hvor en forælder ikke kan nå en underkomponents DOM-node, ved at give komponenten et ekstra ref-argument, som den kan videresende til et indre element. Det muliggør fokusering, måling og rulning af elementer i underkomponenter.

Den kan kombineres med memo, kædes gennem flere lag og vises som ForwardRef i DevTools. Brug den til imperativ DOM-adgang, ikke til at videregive data, som props håndterer bedre.