logo

TechCodeview

React Refs

Refs este prescurtarea folosită pentru referințe în React. Este similar cu chei în React. Este un atribut care face posibilă stocarea unei referințe la anumite noduri DOM sau elemente React. Oferă o modalitate de a accesa nodurile React DOM sau elementele React și modul de a interacționa cu acestea. Este folosit atunci când dorim să schimbăm valoarea unei componente copil, fără a folosi recuzită.

Când să folosiți Refs

Refs pot fi utilizate în următoarele cazuri:

  • Când avem nevoie de măsurători DOM, cum ar fi gestionarea focalizării, selectarea textului sau redarea media.
  • Este folosit în declanșarea animațiilor imperative.
  • La integrarea cu biblioteci DOM terțe.
  • Se poate folosi și ca în apeluri inverse.

Când să nu folosiți Refs

  • Utilizarea lui trebuie evitată pentru orice se poate face declarativ . De exemplu, în loc să utilizați deschis() și închide() metode pe o componentă Dialog, trebuie să treceți un este deschis prop la ea.
  • Ar trebui să evitați utilizarea excesivă a Refs.

Cum se creează Ref

În React, Refs pot fi create utilizând React.createRef() . Poate fi atribuit elementelor React prin intermediul ref atribut. Este de obicei atribuită unei proprietăți de instanță atunci când o componentă este creată și apoi poate fi referită în întreaga componentă.

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

Cum se accesează Refs

În React, atunci când o referință este transmisă unui element din interiorul metodei de randare, o referință la nod poate fi accesată prin atributul curent al ref.

 const node = this.callRef.current;

Refs proprietățile curente

Valoarea ref diferă în funcție de tipul nodului:

  • Când atributul ref este folosit în elementul HTML, ref creat cu React.createRef() primește elementul DOM subiacent ca fiind actual proprietate.
  • Dacă atributul ref este utilizat pe o componentă de clasă personalizată, atunci obiectul ref primește montat instanță a componentei ca proprietate curentă.
  • Atributul ref nu poate fi folosit componentele functionale pentru că nu au exemple.

Adăugați Ref la elementele DOM

În exemplul de mai jos, adăugăm o referință pentru a stoca referința la un nod sau element DOM.

 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;

Ieșire

React Refs

Adăugați Ref la componentele clasei

În exemplul de mai jos, adăugăm o referință pentru a stoca referința la o componentă de clasă.

Exemplu

 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;

Ieșire

React Refs

Ref. de apel invers

În reactie, există o altă modalitate de a folosi refs care se numește „ refs ' și oferă mai mult control atunci când sunt arbitrii a stabilit și dezinstalat . În loc să creeze refs prin metoda createRef(), React permite o modalitate de a crea refs prin transmiterea unei funcții de apel invers atributului ref al unei componente. Arată ca codul de mai jos.

 this.callRefInput = element} /&gt;

Funcția de apel invers este utilizată pentru a stoca o referință la nodul DOM într-o proprietate a instanței și poate fi accesată în altă parte. Poate fi accesat după cum urmează:

 this.callRefInput.value

Exemplul de mai jos vă ajută să înțelegeți funcționarea referințelor de apel invers.

 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;

În exemplul de mai sus, React va apela apelul „ref” pentru a stoca referința la elementul DOM de intrare când componenta monturi , iar când componenta se demontează , sună-l cu nul . Refs sunt întotdeauna la zi inainte de componentDidMount sau componentDidUpdate incendii. Trecerea referințelor de apel invers între componente este aceeași cu cea cu care puteți lucra cu referințe de obiect, care este creată cu React.createRef().

Ieșire

React Refs

Redirecționarea Ref de la o componentă la o altă componentă

Redirecționarea ref este o tehnică care este utilizată pentru trecerea unui ref printr-o componentă către una dintre componentele sale fii. Acesta poate fi realizat prin utilizarea React.forwardRef() metodă. Această tehnică este deosebit de utilă cu componente de ordin superior și utilizat în mod special în bibliotecile de componente reutilizabile. Cel mai frecvent exemplu este dat mai jos.

Exemplu

 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;

În exemplul de mai sus, există o componentă TextInput care are un copil ca câmp de intrare. Acum, pentru a trece sau înainte ref până la intrare, mai întâi, creați un ref și apoi transmiteți referința . După aceea, React trimite arbitrul către înainteRef funcţionează ca un al doilea argument. În continuare, transmitem acest argument referitor la . Acum, valoarea nodului DOM poate fi accesată la intrareRef.curent .

Reacționează cu useRef()

Este introdus în Reacționează 16.7 și versiunea de mai sus. Ajută să obținem acces la nodul sau elementul DOM și apoi putem interacționa cu acel nod sau element DOM, cum ar fi focalizarea elementului de intrare sau accesarea valorii elementului de intrare. Returnează obiectul ref al cărui .actual proprietate inițializată la argumentul transmis. Obiectul returnat persistă pe durata de viață a componentei.

Sintaxă

 const refContainer = useRef(initialValue);

Exemplu

În codul de mai jos, utilizareRef este o funcție care este atribuită unei variabile, intrareRef , și apoi atașat la un atribut numit ref în interiorul elementului HTML la care doriți să faceți referire.

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