logo

TechCodeview

Reager Refs

Refs er stenografien som brukes til referanser i React. Det ligner på nøkler i React. Det er et attributt som gjør det mulig å lagre en referanse til bestemte DOM-noder eller React-elementer. Det gir en måte å få tilgang til React DOM-noder eller React-elementer og hvordan man samhandler med det. Det brukes når vi ønsker å endre verdien av en barnekomponent, uten å bruke rekvisitter.

Når du skal bruke ref

Refs kan brukes i følgende tilfeller:

  • Når vi trenger DOM-målinger som styring av fokus, tekstvalg eller medieavspilling.
  • Den brukes til å utløse imperative animasjoner.
  • Ved integrering med tredjeparts DOM-biblioteker.
  • Den kan også brukes som ved tilbakeringinger.

Når skal du ikke bruke Ref

  • Bruken bør unngås for alt som kan gjøres deklarativt . For eksempel i stedet for å bruke åpen() og Lukk() metoder på en Dialog-komponent, må du bestå en er åpen støtte seg til det.
  • Du bør unngå overbruk av Refs.

Hvordan lage refs

I React kan Refs opprettes ved å bruke React.createRef() . Den kan tilordnes til React-elementer via ref Egenskap. Den tilordnes vanligvis til en forekomstegenskap når en komponent opprettes, og kan deretter refereres til gjennom hele komponenten.

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

Hvordan få tilgang til refs

I React, når en ref sendes til et element i gjengivelsesmetoden, kan en referanse til noden nås via den gjeldende attributten til ref.

 const node = this.callRef.current;

Refs gjeldende Egenskaper

Ref-verdien varierer avhengig av typen node:

  • Når ref-attributtet brukes i HTML-elementet, opprettes refen med React.createRef() mottar det underliggende DOM-elementet som sitt nåværende eiendom.
  • Hvis ref-attributtet brukes på en tilpasset klassekomponent, mottar ref-objektet montert forekomst av komponenten som dens nåværende egenskap.
  • Ref-attributtet kan ikke brukes på funksjonskomponenter fordi de ikke har forekomster.

Legg til Ref til DOM-elementer

I eksemplet nedenfor legger vi til en ref for å lagre referansen 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;

Produksjon

Reager Refs

Legg til Ref til klassekomponenter

I eksemplet nedenfor legger vi til en ref for å lagre referansen 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;

Produksjon

Reager Refs

Tilbakeringing refs

Som reaksjon er det en annen måte å bruke refs på som kalles ' tilbakeringing refs ' og det gir mer kontroll når dommerne er det sett og deaktivert . I stedet for å lage refs ved createRef()-metoden, tillater React en måte å lage refs ved å sende en tilbakeringingsfunksjon til ref-attributtet til en komponent. Det ser ut som koden nedenfor.

 this.callRefInput = element} /&gt;

Tilbakeringingsfunksjonen brukes til å lagre en referanse til DOM-noden i en forekomstegenskap og kan nås andre steder. Den kan nås som nedenfor:

 this.callRefInput.value

Eksemplet nedenfor hjelper deg med å forstå hvordan tilbakeringingsrefer 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 eksemplet ovenfor vil React kalle 'ref' tilbakeringing for å lagre referansen til inndata-DOM-elementet når komponenten ridedyr , og når komponenten demonteres , kall det med null . Refs er alltid oppdatert før componentDidMount eller componentDidUpdate branner. Tilbakeringingsrefsene passerer mellom komponenter er den samme som du kan jobbe med objektrefs, som er opprettet med React.createRef().

Produksjon

Reager Refs

Videresending av Ref fra en komponent til en annen komponent

Referansesending er en teknikk som brukes for å passere en ref gjennom en komponent til en av dens underordnede komponenter. Det kan utføres ved å gjøre bruk av React.forwardRef() metode. Denne teknikken er spesielt nyttig med komponenter av høyere orden og spesielt brukt i gjenbrukbare komponentbiblioteker. Det vanligste eksemplet er gitt 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 eksemplet ovenfor er det en komponent Tekstinntasting som har et barn som inndatafelt. Nå, for å sende eller videresende ref ned til inngangen, lag først en ref og send deretter refen ned til . Etter det sender React dommeren videre til fremRef fungere som et andre argument. Deretter videresender vi dette ref-argumentet ned til . Nå kan verdien til DOM-noden nås på inputRef.current .

Reager med useRef()

Det er introdusert i Reager 16.7 og over versjon. Det hjelper å få tilgang til DOM-noden eller -elementet, og så kan vi samhandle med den DOM-noden eller -elementet, for eksempel å fokusere inngangselementet eller få tilgang til inngangselementverdien. Den returnerer ref-objektet hvis .nåværende egenskap initialisert til det beståtte argumentet. Det returnerte objektet vedvarer i hele levetiden til komponenten.

Syntaks

 const refContainer = useRef(initialValue);

Eksempel

I koden nedenfor, brukRef er en funksjon som blir tilordnet en variabel, inputRef , og deretter knyttet til et attributt kalt ref inne i HTML-elementet du vil referere til.

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