logo

TechCodeview

Reaccionar referencias

Refs es la abreviatura utilizada para referencias en Reaccionar. Esto es similar a llaves en Reaccionar. Es un atributo que permite almacenar una referencia a nodos DOM particulares o elementos de React. Proporciona una forma de acceder a los nodos DOM de React o a los elementos de React y cómo interactuar con ellos. Se utiliza cuando queremos cambiar el valor de un componente hijo, sin necesidad de utilizar accesorios.

Cuándo utilizar referencias

Las referencias se pueden utilizar en los siguientes casos:

  • Cuando necesitamos medidas DOM, como administrar el enfoque, la selección de texto o la reproducción multimedia.
  • Se utiliza para activar animaciones imperativas.
  • Al integrarse con bibliotecas DOM de terceros.
  • También se puede utilizar como en devoluciones de llamada.

Cuándo no usar referencias

  • Se debe evitar su uso para cualquier cosa que se pueda hacer. declarativamente . Por ejemplo, en lugar de utilizar abierto() y cerca() métodos en un componente de diálogo, es necesario pasar un Esta abierto apoyarlo.
  • Debería evitar el uso excesivo de las Refs.

Cómo crear referencias

En React, las referencias se pueden crear usando Reaccionar.createRef() . Se puede asignar a elementos de React a través del árbitro atributo. Por lo general, se asigna a una propiedad de instancia cuando se crea un componente y luego se puede hacer referencia a él en todo el componente.

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

Cómo acceder a las referencias

En React, cuando se pasa una referencia a un elemento dentro del método de renderizado, se puede acceder a una referencia al nodo a través del atributo actual de la referencia.

 const node = this.callRef.current;

Refs propiedades actuales

El valor de referencia difiere según el tipo de nodo:

  • Cuando el atributo ref se utiliza en un elemento HTML, la referencia creada con Reaccionar.createRef() recibe el elemento DOM subyacente como su actual propiedad.
  • Si el atributo ref se usa en un componente de clase personalizado, entonces el objeto ref recibe el montado instancia del componente como su propiedad actual.
  • El atributo ref no se puede utilizar en componentes de función porque no tienen instancias.

Agregar referencia a elementos DOM

En el siguiente ejemplo, agregamos una referencia para almacenar la referencia a un nodo o elemento 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;

Producción

Reaccionar referencias

Agregar referencia a componentes de clase

En el siguiente ejemplo, agregamos una referencia para almacenar la referencia a un componente de clase.

Ejemplo

 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;

Producción

Reaccionar referencias

Referencias de devolución de llamada

En reaccionar, hay otra forma de usar referencias que se llama ' referencias de devolución de llamada ' y da más control cuando los árbitros están colocar y desarmado . En lugar de crear referencias mediante el método createRef(), React permite una forma de crear referencias pasando una función de devolución de llamada al atributo ref de un componente. Se parece al siguiente código.

 this.callRefInput = element} /&gt;

La función de devolución de llamada se utiliza para almacenar una referencia al nodo DOM en una propiedad de instancia y se puede acceder a ella desde otro lugar. Se puede acceder a él de la siguiente manera:

 this.callRefInput.value

El siguiente ejemplo ayuda a comprender el funcionamiento de las referencias de devolución de llamada.

 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;

En el ejemplo anterior, React llamará a la devolución de llamada 'ref' para almacenar la referencia al elemento DOM de entrada cuando el componente monturas , y cuando el componente desmonta , llámalo con nulo . Los árbitros siempre son A hoy antes de componenteDidMount o componenteDidUpdate incendios. El paso de referencias de devolución de llamada entre componentes es el mismo que se puede trabajar con referencias de objetos, que se crean con React.createRef().

Producción

Reaccionar referencias

Reenvío de referencia de un componente a otro componente

El reenvío de referencias es una técnica que se utiliza para pasar un árbitro a través de un componente a uno de sus componentes secundarios. Se puede realizar haciendo uso del Reaccionar.forwardRef() método. Esta técnica es particularmente útil con componentes de orden superior y se utiliza especialmente en bibliotecas de componentes reutilizables. El ejemplo más común se da a continuación.

Ejemplo

 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;

En el ejemplo anterior, hay un componente Entrada de texto que tiene un niño como campo de entrada. Ahora, para pasar o reenviar el árbitro hasta la entrada, primero, cree una referencia y luego pase su referencia a . Después de eso, React reenvía la referencia al adelanteRef funcionar como segundo argumento. A continuación, reenviamos este argumento de referencia a . Ahora, se puede acceder al valor del nodo DOM en inputRef.actual .

Reaccionar con useRef()

Se introduce en Reaccionar 16.7 y versión superior. Ayuda a acceder al nodo o elemento DOM, y luego podemos interactuar con ese nodo o elemento DOM, como enfocar el elemento de entrada o acceder al valor del elemento de entrada. Devuelve el objeto ref cuyo .actual propiedad inicializada con el argumento pasado. El objeto devuelto persiste durante la vida útil del componente.

Sintaxis

 const refContainer = useRef(initialValue);

Ejemplo

En el siguiente código, utilizarRef es una función que se asigna a una variable, entradaRef y luego adjunto a un atributo llamado ref dentro del elemento HTML al que desea hacer referencia.

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