Referencias de reenvío de ReactJS

El método forwardRef en React permite que los componentes principales se muevan hacia abajo (o «hacia adelante») refs a sus hijos. ForwardRef le da a un componente secundario una referencia a una entidad DOM creada por su componente principal en React. Esto ayuda al niño a leer y modificar el elemento desde cualquier lugar donde se utilice.

¿Cómo funciona forwardRef en React?

En React, los componentes principales generalmente usan accesorios para transferir datos a sus elementos secundarios. Considere que crea un componente secundario con un nuevo conjunto de accesorios para cambiar su comportamiento. Necesitamos una forma de cambiar el comportamiento de un componente secundario sin tener que buscar el estado o volver a renderizar el componente. Podemos hacer esto usando refs. Podemos acceder a un Node DOM que está representado por un elemento usando refs. Como resultado, le haremos cambios sin afectar su estado ni tener que volver a renderizarlo.

Cuando un componente secundario necesita hacer referencia al Node actual de su padre, el componente principal debe tener una forma para que el hijo reciba su referencia. La técnica se conoce como reenvío de referencias.

Sintaxis:

React.forwardRef((props, ref) => {})

Parámetros: Toma una función con argumentos props y ref.

Valor de retorno:  esta función devuelve un elemento JSX.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
 
class App extends React.Component {
  constructor(props) {
    super(props)
    this.aRef = React.createRef()
  }
  render() {
    return (
      <>
        <Counter ref={this.aRef} />
        <button onClick={() => { console.log(this.aRef) }}>
         Ref
        </button>
      </>
    )
  }
}
 
const Counter = React.forwardRef((props, ref) => {
  class Counter extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        count: 0
      }
    }
    render() {
      return (
        <div>
          Count: {this.state.count}
          <button ref={ref} onClick={() => this.setState(
            { count: this.state.count + 1 })}>
                  Increment
          </button>
        </div>
      )
    }
  }
  return <Counter />
})
 
export default App

 
Explicación: Dado que el contador está dentro de la función, puede acceder a los parámetros props y ref usando un cierre. El contador se representa y se devuelve. La referencia que se pasa al componente Contador se establece en el valor del atributo de referencia del elemento del botón. El atributo ref del elemento de contador ahora se establecerá para hacer referencia al elemento de botón.

El componente Contador es representado por el componente Aplicación. Comienza creando una ref . this.aRef se asigna al atributo ref del componente Counter como un valor. Hemos incluido un botón que registra el valor de this.aRef . this.aRef contendrá el HTMLButtonElement del botón Incr en el componente Contador . Al hacer clic en el botón Ref confirmará que registrará this.aRef que registrará el objeto del botón Incr HTMLButtonElement. No registró la instancia del Contador porque el componente Contador lo reenvió a su componente secundario, el botón Incrementar.

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
 

Referencia: https://reactjs.org/docs/forwarding-refs.html