logo

TechCodeview

Reacciona Refs

Refs és l'abreviatura que s'utilitza referències en Reaccionar. És semblant a claus en Reaccionar. És un atribut que permet emmagatzemar una referència a nodes DOM o elements de React concrets. Proporciona una manera d'accedir als nodes o elements de React DOM i com interactuar amb ells. S'utilitza quan volem canviar el valor d'un component fill, sense fer servir accessoris.

Quan utilitzar Refs

Les refs es poden utilitzar en els casos següents:

  • Quan necessitem mesures DOM, com ara la gestió del focus, la selecció de text o la reproducció de mitjans.
  • S'utilitza per activar animacions imperatives.
  • Quan s'integra amb biblioteques DOM de tercers.
  • També es pot utilitzar com a devolució de trucades.

Quan no utilitzar Refs

  • S'ha d'evitar el seu ús per a qualsevol cosa que es pugui fer declarativament . Per exemple, en comptes d'utilitzar obert() i Tanca() mètodes en un component de diàleg, heu de passar un ésObert suport a ell.
  • Hauríeu d'evitar l'ús excessiu de les Refs.

Com crear Refs

A React, es poden crear Refs utilitzant React.createRef() . Es pot assignar als elements de React mitjançant el ref atribut. Normalment s'assigna a una propietat d'instància quan es crea un component, i després es pot fer referència a tot el component.

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

Com accedir a les Refs

A React, quan es passa una referència a un element dins del mètode de renderització, es pot accedir a una referència al node mitjançant l'atribut actual de la referència.

 const node = this.callRef.current;

Refs propietats actuals

El valor de referència difereix segons el tipus de node:

  • Quan l'atribut ref s'utilitza a l'element HTML, es crea la ref amb React.createRef() rep l'element DOM subjacent com a seu actual propietat.
  • Si l'atribut ref s'utilitza en un component de classe personalitzat, l'objecte ref rep el muntat instància del component com a propietat actual.
  • L'atribut ref no es pot utilitzar components de la funció perquè no tenen casos.

Afegeix Ref als elements DOM

A l'exemple següent, estem afegint una referència per emmagatzemar la referència a un node o 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;

Sortida

Reacciona Refs

Afegeix una referència als components de la classe

A l'exemple següent, estem afegint una referència per emmagatzemar la referència a un component de classe.

Exemple

 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;

Sortida

Reacciona Refs

Referències de devolució de trucada

En reaccionar, hi ha una altra manera d'utilitzar refs que s'anomena ' refs de devolució de trucada ' i dóna més control quan ho són els àrbitres conjunt i sense fixar . En lloc de crear refers mitjançant el mètode createRef(), React permet una manera de crear referents passant una funció de devolució de trucada a l'atribut ref d'un component. Sembla el codi següent.

 this.callRefInput = element} /&gt;

La funció de devolució de trucada s'utilitza per emmagatzemar una referència al node DOM en una propietat d'instància i es pot accedir a qualsevol altre lloc. S'hi pot accedir de la següent manera:

 this.callRefInput.value

L'exemple següent ajuda a entendre el funcionament de les referents de devolució de trucada.

 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;

A l'exemple anterior, React trucarà la devolució de trucada 'ref' per emmagatzemar la referència a l'element DOM d'entrada quan el component muntatges , i quan el component desmunta , crida'l amb nul . Els refs sempre són actualitzat Abans de componentDidMount o componentDidUpdate incendis. El pas de refers de devolució de trucada entre components és el mateix que podeu treballar amb refs d'objecte, que es crea amb React.createRef().

Sortida

Reacciona Refs

Reenviament de referència d'un component a un altre

El reenviament de referència és una tècnica que s'utilitza per passar a ref a través d'un component a un dels seus components secundaris. Es pot realitzar fent ús del React.forwardRef() mètode. Aquesta tècnica és especialment útil amb components d'ordre superior i especialment utilitzat en biblioteques de components reutilitzables. L'exemple més comú es dóna a continuació.

Exemple

 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;

A l'exemple anterior, hi ha un component Entrada de text que té un fill com a camp d'entrada. Ara, per passar o avançar el ref fins a l'entrada, primer, creeu una referència i després passeu-la a . Després d'això, React envia l'àrbitre a la endavantRef funcionar com a segon argument. A continuació, transmetem aquest argument de referència a . Ara, es pot accedir al valor del node DOM a entradaRef.current .

Reacciona amb useRef()

S'introdueix a Reacciona 16.7 i versió superior. Ajuda a accedir al node o element DOM i, a continuació, podem interactuar amb aquest node o element DOM, com ara enfocar l'element d'entrada o accedir al valor de l'element d'entrada. Retorna l'objecte de referència del qual .actual propietat inicialitzada amb l'argument passat. L'objecte retornat persisteix durant la vida útil del component.

Sintaxi

 const refContainer = useRef(initialValue);

Exemple

En el codi següent, úsRef és una funció que s'assigna a una variable, entradaRef , i després s'adjunta a un atribut anomenat ref dins de l'element HTML al qual voleu fer referència.

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