logo

TechCodeview

Reagirajte Ref

Refs je skraćenica koja se koristi za reference u Reactu. Slično je ključevi u Reactu. To je atribut koji omogućuje pohranjivanje reference na određene DOM čvorove ili React elemente. Omogućuje pristup React DOM čvorovima ili React elementima i način interakcije s njima. Koristi se kada želimo promijeniti vrijednost dijete komponente, bez korištenja rekvizita.

Kada koristiti Ref

Reference se mogu koristiti u sljedećim slučajevima:

  • Kada su nam potrebna DOM mjerenja kao što su upravljanje fokusom, odabir teksta ili reprodukcija medija.
  • Koristi se za pokretanje imperativnih animacija.
  • Prilikom integracije s DOM bibliotekama trećih strana.
  • Također se može koristiti kao u povratnim pozivima.

Kada ne koristiti Ref

  • Njegovu upotrebu treba izbjegavati za sve što se može učiniti deklarativno . Na primjer, umjesto korištenja otvoren() i Zatvoriti() metode na komponenti Dialog, trebate proslijediti otvoreno je podupirati to.
  • Trebali biste izbjegavati prekomjernu upotrebu referenci.

Kako stvoriti Ref

U Reactu se Refovi mogu stvoriti korištenjem React.createRef() . Može se dodijeliti React elementima putem ref atribut. Obično se dodjeljuje svojstvu instance kada je komponenta kreirana, a zatim se može referencirati kroz cijelu komponentu.

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

Kako pristupiti Ref

U Reactu, kada se ref proslijedi elementu unutar metode renderiranja, referenci na čvor se može pristupiti preko trenutnog atributa ref.

 const node = this.callRef.current;

Referira trenutna svojstva

Vrijednost ref razlikuje se ovisno o vrsti čvora:

  • Kada se atribut ref koristi u HTML elementu, ref stvoren pomoću React.createRef() prima temeljni DOM element kao svoj Trenutno imovine.
  • Ako se atribut ref koristi na prilagođenoj komponenti klase, tada objekt ref prima montiran instanca komponente kao njezino trenutno svojstvo.
  • Atribut ref ne može se koristiti na komponente funkcije jer nemaju instance.

Dodajte Ref DOM elementima

U donjem primjeru dodajemo ref za pohranjivanje reference na DOM čvor ili 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;

Izlaz

Reagirajte Ref

Dodajte Ref u komponente klase

U donjem primjeru dodajemo ref za pohranjivanje reference na komponentu klase.

Primjer

 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;

Izlaz

Reagirajte Ref

Ref. povratnog poziva

U Reactu postoji još jedan način korištenja referenci koji se zove ' povratni poziv ref ' i daje veću kontrolu kada su suci postaviti i nepostavljeno . Umjesto stvaranja referenci metodom createRef(), React omogućuje način stvaranja referenci prosljeđivanjem funkcije povratnog poziva atributu ref komponente. Izgleda kao kod u nastavku.

 this.callRefInput = element} /&gt;

Funkcija povratnog poziva koristi se za pohranjivanje reference na DOM čvor u svojstvu instance i može joj se pristupiti drugdje. Može mu se pristupiti na sljedeći način:

 this.callRefInput.value

Primjer u nastavku pomaže razumjeti rad povratnih referenci.

 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;

U gornjem primjeru, React će pozvati 'ref' povratni poziv za pohranjivanje reference na ulazni DOM element kada komponenta nosači , a kada komponenta demontira , nazovite to sa ništavan . Suci su uvijek do danas prije komponentaDidMount ili komponentaDidUpdate požari. Prijenos referenci povratnog poziva između komponenti isti je kao što možete raditi s referencama objekata, koje se stvaraju s React.createRef().

Izlaz

Reagirajte Ref

Prosljeđivanje Ref-a s jedne komponente na drugu komponentu

Prosljeđivanje referenci je tehnika koja se koristi za prosljeđivanje a ref preko komponente do jedne od njenih podređenih komponenti. Može se izvesti korištenjem React.forwardRef() metoda. Ova tehnika je posebno korisna sa komponente višeg reda i posebno se koristi u bibliotekama komponenata za višekratnu upotrebu. Najčešći primjer naveden je u nastavku.

Primjer

 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;

U gornjem primjeru postoji komponenta Unos teksta koji ima dijete kao polje za unos. Sada, proći ili proslijediti ref dolje do ulaza, prvo stvorite ref, a zatim proslijedite svoju ref . Nakon toga, React prosljeđuje ref naprijedRef funkcionirati kao drugi argument. Zatim prosljeđujemo ovaj ref argument dolje . Sada se vrijednosti DOM čvora može pristupiti na ulazRef.struja .

Reagirajte pomoću useRef()

Uvodi se u Reagirajte 16.7 i gornju verziju. Pomaže dobiti pristup DOM čvoru ili elementu, a zatim možemo komunicirati s tim DOM čvorom ili elementom kao što je fokusiranje ulaznog elementa ili pristup vrijednosti ulaznog elementa. Vraća ref objekt čiji je .Trenutno svojstvo inicijalizirano proslijeđenim argumentom. Vraćeni objekt ostaje za vrijeme trajanja komponente.

Sintaksa

 const refContainer = useRef(initialValue);

Primjer

U donjem kodu, upotrebaRef je funkcija koja se dodjeljuje varijabli, unosRef , a zatim priložen atributu pod nazivom ref unutar HTML elementa u kojem želite referencirati.

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