logo

TechCodeview

Reager Refs

Refs er den stenografi, der bruges til referencer i React. Det ligner nøgler i React. Det er en attribut, som gør det muligt at gemme en reference til bestemte DOM-noder eller React-elementer. Det giver en måde at få adgang til React DOM-noder eller React-elementer og hvordan man interagerer med det. Det bruges, når vi ønsker at ændre værdien af ​​en underordnet komponent, uden at gøre brug af rekvisitter.

Hvornår skal man bruge refs

Refs kan bruges i følgende tilfælde:

  • Når vi har brug for DOM-målinger såsom styring af fokus, tekstvalg eller medieafspilning.
  • Det bruges til at udløse imperative animationer.
  • Ved integration med tredjeparts DOM-biblioteker.
  • Det kan også bruges som ved tilbagekald.

Hvornår må man ikke bruge Ref

  • Dens brug bør undgås for alt, hvad der kan gøres deklarativt . For eksempel i stedet for at bruge åben() og tæt() metoder på en Dialog-komponent, skal du bestå en er åben støtte til det.
  • Du bør undgå overforbrug af Refs.

Sådan opretter du Refs

I React kan Refs oprettes ved at bruge React.createRef() . Det kan tildeles til React-elementer via ref attribut. Det tildeles almindeligvis til en instansegenskab, når en komponent oprettes, og kan derefter refereres til i hele komponenten.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } }

Sådan får du adgang til Refs

I React, når en ref sendes til et element inde i render-metoden, kan en reference til noden tilgås via den aktuelle attribut for ref.

 const node = this.callRef.current;

Refs nuværende Egenskaber

Ref-værdien varierer afhængigt af nodens type:

  • Når ref-attributten bruges i HTML-elementet, bliver refen oprettet med React.createRef() modtager det underliggende DOM-element som sin nuværende ejendom.
  • Hvis ref-attributten bruges på en brugerdefineret klassekomponent, modtager ref-objektet monteret forekomst af komponenten som dens nuværende egenskab.
  • Ref attributten kan ikke bruges på funktionskomponenter fordi de ikke har forekomster.

Tilføj Ref til DOM-elementer

I eksemplet nedenfor tilføjer vi en ref for at gemme referencen til en DOM-node eller et element.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App;

Produktion

Reager Refs

Tilføj Ref til klassekomponenter

I eksemplet nedenfor tilføjer vi en ref for at gemme referencen til en klassekomponent.

Eksempel

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

Produktion

Reager Refs

Callback refs

Som reaktion er der en anden måde at bruge refs på, der kaldes ' tilbagekald refs ' og det giver mere kontrol, når dommerne er sæt og deaktiveret . I stedet for at oprette refs ved createRef()-metoden, tillader React en måde at oprette refs ved at overføre en tilbagekaldsfunktion til ref-attributten for en komponent. Det ligner koden nedenfor.

 this.callRefInput = element} /&gt;

Callback-funktionen bruges til at gemme en reference til DOM-noden i en instansegenskab og kan tilgås andre steder. Den kan tilgås som nedenfor:

 this.callRefInput.value

Eksemplet nedenfor hjælper med at forstå, hvordan tilbagekaldsrefer fungerer.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App;

I ovenstående eksempel vil React kalde 'ref'-tilbagekaldet for at gemme referencen til input-DOM-elementet, når komponenten monteringer , og når komponenten afmonteres , kald det med nul . Refs er altid opdateret før componentDidMount eller componentDidUpdate brande. Callback refs pass mellem komponenter er det samme, som du kan arbejde med objekt refs, som er oprettet med React.createRef().

Produktion

Reager Refs

Videresendelse af Ref fra en komponent til en anden komponent

Ref forwarding er en teknik, der bruges til at bestå en ref gennem en komponent til en af ​​dens underordnede komponenter. Det kan udføres ved at gøre brug af React.forwardRef() metode. Denne teknik er især nyttig med komponenter af højere orden og specielt brugt i genbrugelige komponentbiblioteker. Det mest almindelige eksempel er givet nedenfor.

Eksempel

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; const TextInput = React.forwardRef((props, ref) =&gt; ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e =&gt; { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}&gt; Submit ); } } export default App;

I ovenstående eksempel er der en komponent Tekstinput der har et barn som inputfelt. Nu, for at videregive eller videresende ref ned til input, skal du først oprette en ref og derefter sende din ref ned til . Derefter sender React dommeren videre til fremRef fungere som et andet argument. Dernæst videresender vi dette ref-argument ned til . Nu kan værdien af ​​DOM-noden tilgås på inputRef.strøm .

Reager med useRef()

Det introduceres i Reager 16.7 og ovenstående version. Det hjælper at få adgang til DOM-knuden eller -elementet, og så kan vi interagere med den DOM-node eller -element, såsom at fokusere inputelementet eller få adgang til inputelementværdien. Det returnerer ref-objektet, hvis .nuværende egenskab initialiseret til det beståede argument. Det returnerede objekt består i hele komponentens levetid.

Syntaks

 const refContainer = useRef(initialValue);

Eksempel

I nedenstående kode, brugRef er en funktion, der bliver tildelt en variabel, inputRef , og derefter knyttet til en attribut kaldet ref inde i HTML-elementet, som du vil referere til.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () =&gt; { inputRef.current.focus(); }; return ( Submit ); }