Mønstre for videresending av refs i React: Mestre design av komponent-API-er

Videresending av refs (ref forwarding) er en kraftig teknikk i React som lar deg automatisk sende en ref gjennom en komponent til ett av dens barn. Dette gjør det mulig for foreldrekomponenter å samhandle direkte med spesifikke DOM-elementer eller komponentinstanser i barna sine, selv om disse barna er dypt nestet. Å forstå og bruke videresending av refs effektivt er avgjørende for å bygge fleksible, gjenbrukbare og vedlikeholdbare komponent-API-er.

Hvorfor videresending av refs er viktig for design av komponent-API-er

Når man designer React-komponenter, spesielt de som er ment for gjenbruk, er det viktig å vurdere hvordan andre utviklere vil samhandle med dem. Et veldesignet komponent-API er:

• Intuitivt: Enkelt å forstå og bruke.
• Fleksibelt: Kan tilpasses ulike bruksområder uten å kreve betydelige endringer.
• Vedlikeholdbart: Endringer i den interne implementeringen av en komponent skal ikke ødelegge ekstern kode som bruker den.

Videresending av refs spiller en nøkkelrolle i å oppnå disse målene. Det lar deg eksponere spesifikke deler av komponentens interne struktur til omverdenen, samtidig som du beholder kontrollen over komponentens interne implementering.

Grunnleggende om `React.forwardRef`

Kjernen i videresending av refs i React er `React.forwardRef`, en høyere-ordens komponent (HOC). Denne funksjonen tar en render-funksjon som argument og returnerer en ny React-komponent som kan motta en `ref`-prop.

Her er et enkelt eksempel:

            import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

export default MyInput;

            

              
                Copy
              
            
          

I dette eksempelet er `MyInput` en funksjonell komponent som bruker `forwardRef`. `ref`-propen som sendes til `MyInput` blir deretter direkte tildelt `input`-elementet. Dette gjør at en foreldrekomponent kan få en referanse til den faktiske DOM-noden til input-feltet.

Bruk av den videresendte ref-en

Slik kan du bruke `MyInput`-komponenten i en foreldrekomponent:

            import React, { useRef, useEffect } from 'react';
import MyInput from './MyInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    

      
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

I dette eksempelet oppretter `ParentComponent` en ref ved hjelp av `useRef` og sender den til `MyInput`-komponenten. `useEffect`-hooken bruker deretter ref-en til å fokusere på input-feltet når komponenten monteres. Dette demonstrerer hvordan en foreldrekomponent kan manipulere DOM-elementet direkte i sin barnekomponent ved hjelp av videresending av refs.

Vanlige mønstre for videresending av refs for design av komponent-API-er

La oss nå utforske noen vanlige og nyttige mønstre for videresending av refs som kan forbedre designet av komponent-API-ene dine betydelig.

1. Videresende refs til DOM-elementer

Som vist i det grunnleggende eksempelet ovenfor, er videresending av refs til DOM-elementer et fundamentalt mønster. Dette lar foreldrekomponenter få tilgang til og manipulere spesifikke DOM-noder i komponenten din. Dette er spesielt nyttig for:

• Fokushåndtering: Sette fokus på et input-felt eller et annet interaktivt element.
• Måling av elementdimensjoner: Hente bredden eller høyden på et element.
• Tilgang til elementegenskaper: Lese eller endre elementattributter.

Eksempel: En tilpassbar knapp-komponent

Tenk deg en knapp-komponent som lar brukere tilpasse utseendet.

            import React, { forwardRef } from 'react';

const CustomButton = forwardRef((props, ref) => {
  const { children, ...rest } = props;
  return (
    
      {children}
    
  );
});

export default CustomButton;

            

              
                Copy
              
            
          

En foreldrekomponent kan nå få en referanse til knapp-elementet og utføre handlinger som å klikke den programmatisk eller endre stilen.

2. Videresende refs til barnekomponenter

Videresending av refs er ikke begrenset til bare DOM-elementer. Du kan også videresende refs til andre React-komponenter. Dette lar foreldrekomponenter få tilgang til instansmetodene eller egenskapene til barnekomponenter.

Eksempel: En kontrollert input-komponent

Forestill deg at du har en tilpasset input-komponent som administrerer sin egen tilstand. Du vil kanskje eksponere en metode for å tømme input-verdien programmatisk.

            import React, { useState, forwardRef, useImperativeHandle } from 'react';

const ControlledInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  const clearInput = () => {
    setValue('');
  };

  useImperativeHandle(ref, () => ({
    clear: clearInput,
  }));

  return (
     setValue(e.target.value)}
    />
  );
});

export default ControlledInput;

            

              
                Copy
              
            
          

I dette eksempelet brukes `useImperativeHandle` til å eksponere `clear`-metoden til foreldrekomponenten. Forelderen kan deretter kalle denne metoden for å tømme input-verdien.

            import React, { useRef } from 'react';
import ControlledInput from './ControlledInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleClearClick = () => {
    if (inputRef.current) {
      inputRef.current.clear();
    }
  };

  return (
    

      
      Tøm
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Dette mønsteret er nyttig når du trenger å eksponere spesifikk funksjonalitet fra en barnekomponent til dens forelder, samtidig som du beholder kontrollen over barnets interne tilstand.

3. Kombinere refs for komplekse komponenter

I mer komplekse komponenter kan det hende du må videresende flere refs til forskjellige elementer eller komponenter i komponenten din. Dette kan oppnås ved å kombinere refs ved hjelp av en egendefinert funksjon.

Eksempel: En sammensatt komponent med flere fokuserbare elementer

La oss si du har en komponent som inneholder både et input-felt og en knapp. Du vil tillate at foreldrekomponenten kan fokusere enten på input-feltet eller på knappen.

            import React, { useRef, forwardRef, useEffect } from 'react';

const CompositeComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  useEffect(() => {
    if (typeof ref === 'function') {
      ref({
        input: inputRef.current,
        button: buttonRef.current,
      });
    } else if (ref && typeof ref === 'object') {
      ref.current = {
        input: inputRef.current,
        button: buttonRef.current,
      };
    }
  }, [ref]);

  return (
    

      
      Klikk meg
    
  );
});

export default CompositeComponent;

            

              
                Copy
              
            
          

I dette eksempelet bruker `CompositeComponent` to interne refs, `inputRef` og `buttonRef`. `useEffect`-hooken kombinerer deretter disse refs-ene til ett enkelt objekt og tildeler det til den videresendte ref-en. Dette gjør at foreldrekomponenten kan få tilgang til både input-feltet og knappen.

            import React, { useRef } from 'react';
import CompositeComponent from './CompositeComponent';

const ParentComponent = () => {
  const compositeRef = useRef(null);

  const handleFocusInput = () => {
    if (compositeRef.current && compositeRef.current.input) {
      compositeRef.current.input.focus();
    }
  };

  const handleFocusButton = () => {
    if (compositeRef.current && compositeRef.current.button) {
      compositeRef.current.button.focus();
    }
  };

  return (
    

      
      Fokuser på input
      Fokuser på knapp
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Dette mønsteret er nyttig når du trenger å eksponere flere elementer eller komponenter i en kompleks komponent til foreldrekomponenten.

4. Betinget videresending av refs

Noen ganger vil du kanskje bare videresende en ref under visse betingelser. Dette kan være nyttig når du vil tilby en standardoppførsel, men tillate foreldrekomponenten å overstyre den.

Eksempel: En komponent med et valgfritt input-felt

La oss si at du har en komponent som bare rendrer et input-felt hvis en bestemt prop er satt. Du vil bare videresende ref-en hvis input-feltet faktisk blir rendret.

            import React, { forwardRef } from 'react';

const ConditionalInput = forwardRef((props, ref) => {
  const { showInput, ...rest } = props;

  if (showInput) {
    return ;
  } else {
    return 
Intet input-felt
;
  }
});

export default ConditionalInput;

            

              
                Copy
              
            
          

I dette eksempelet blir ref-en bare videresendt til `input`-elementet hvis `showInput`-propen er sann. Ellers blir ref-en ignorert.

5. Videresending av refs med høyere-ordens komponenter (HOCs)

Når du bruker høyere-ordens komponenter (HOCs), er det viktig å sørge for at refs blir videresendt korrekt til den omsluttede komponenten. Hvis du ikke håndterer refs riktig, kan det hende foreldrekomponenten ikke får tilgang til den underliggende komponenten.

Eksempel: En enkel HOC for å legge til en ramme

            import React, { forwardRef } from 'react';

const withBorder = (WrappedComponent) => {
  const WithBorder = forwardRef((props, ref) => {
    return (
      

        
      
    );
  });

  WithBorder.displayName = `withBorder(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithBorder;
};

export default withBorder;

            

              
                Copy
              
            
          

I dette eksempelet bruker `withBorder` HOC-en `forwardRef` for å sikre at ref-en blir sendt videre til den omsluttede komponenten. `displayName`-egenskapen er også satt for å gjøre feilsøking enklere.

Viktig merknad: Når du bruker klassekomponenter med HOCs og videresending av refs, vil ref-en bli sendt som en vanlig prop til klassekomponenten. Du må få tilgang til den ved hjelp av `this.props.ref`.

Beste praksis for videresending av refs

For å sikre at du bruker videresending av refs effektivt, bør du vurdere følgende beste praksis:

• Bruk `React.forwardRef` for komponenter som trenger å videresende refs. Dette er standardmåten for å aktivere videresending av refs i React.
• Dokumenter komponent-API-et ditt tydelig. Forklar hvilke elementer eller komponenter som kan nås via ref og hvordan de skal brukes.
• Vær oppmerksom på ytelse. Unngå unødvendig videresending av refs, da det kan medføre ekstra overhead.
• Bruk `useImperativeHandle` for å eksponere et begrenset sett med metoder eller egenskaper. Dette lar deg kontrollere hva foreldrekomponenten kan få tilgang til.
• Unngå overdreven bruk av videresending av refs. I mange tilfeller er det bedre å bruke props for å kommunisere mellom komponenter.

Tilgjengelighetshensyn

Når du bruker videresending av refs, er det viktig å ta hensyn til tilgjengelighet. Sørg for at komponentene dine fortsatt er tilgjengelige for brukere med nedsatt funksjonsevne, selv når refs brukes til å manipulere DOM-elementer. Her er noen tips:

• Bruk ARIA-attributter for å gi semantisk informasjon. Dette hjelper hjelpemidler med å forstå formålet med komponentene dine.
• Håndter fokus korrekt. Sørg for at fokus alltid er synlig og forutsigbart.
• Test komponentene dine med hjelpemidler. Dette er den beste måten å identifisere og fikse tilgjengelighetsproblemer.

Internasjonalisering og lokalisering

Når du designer komponent-API-er for et globalt publikum, bør du vurdere internasjonalisering (i18n) og lokalisering (l10n). Sørg for at komponentene dine enkelt kan oversettes til forskjellige språk og tilpasses ulike kulturelle kontekster. Her er noen tips:

• Bruk et bibliotek for i18n og l10n. Det finnes mange utmerkede biblioteker, som `react-intl` og `i18next`.
• Eksternaliser all tekst. Ikke hardkode tekststrenger i komponentene dine.
• Støtt ulike dato- og tallformater. Tilpass komponentene dine til brukerens locale.
• Vurder høyre-til-venstre (RTL) layouter. Noen språk, som arabisk og hebraisk, skrives fra høyre til venstre.

Eksempler fra hele verden

La oss se på noen eksempler på hvordan videresending av refs kan brukes i ulike kontekster rundt om i verden:

• I e-handelsapplikasjoner: Videresending av refs kan brukes til å fokusere på søkefeltet når brukeren navigerer til søkesiden, noe som forbedrer brukeropplevelsen for kunder globalt.
• I datavisualiseringsbiblioteker: Videresending av refs kan brukes til å få tilgang til de underliggende DOM-elementene i diagrammer og grafer, slik at utviklere kan tilpasse utseendet og oppførselen deres basert på regionale datastandarder.
• I skjemabiblioteker: Videresending av refs kan brukes til å gi programmatisk kontroll over input-felter, som å tømme eller validere dem, noe som er spesielt nyttig i applikasjoner som må overholde ulike personvernregler i forskjellige land.

Konklusjon

Videresending av refs er et kraftig verktøy for å designe fleksible og vedlikeholdbare React-komponent-API-er. Ved å forstå og bruke mønstrene som er diskutert i denne artikkelen, kan du lage komponenter som er enkle å bruke, tilpasningsdyktige til ulike bruksområder og motstandsdyktige mot endringer. Husk å vurdere tilgjengelighet og internasjonalisering når du designer komponentene dine for å sikre at de kan brukes av et globalt publikum.

Ved å mestre videresending av refs og andre avanserte React-teknikker, kan du bli en mer effektiv og verdifull React-utvikler. Fortsett å utforske, eksperimentere og forbedre ferdighetene dine for å bygge fantastiske brukergrensesnitt som gleder brukere over hele verden.