Cómo exponer y acceder a un elemento del DOM específico en ReactJS

Cómo exponer y acceder a un elemento del DOM específico en ReactJS

En este artículo, usaremos el siguiente ejemplo de creación de un componente ReactJS de una biblioteca que ya existe, como un visor de imágenes de 360 ​​grados. Hay muchas bibliotecas en JavaScript que to ayudan a implementar tal cosa, sin embargo, la mayoría de ellas requieren como parámetro de inicialización un elemento del DOM, por ejemplo:

let options = {};
let domElement = document.getElementById("item");

ThirdParty360ViewerLibrary.initialize(domElement, options);

Simplemente seleccionando el elemento DOM usando getElementById o querySelector haria el trabajo en aplicaciones regulares de JavaScript, sin embargo en ReactJS esta es una mala práctica, en cambio, debes confiar en React Refs para obtener el nodo DOM siempre que lo necesites.

¿Qué son las React Refs?

Las referencias te ayudan a obtener acceso directamente a los nodos DOM o los elementos React creados en el método de representación. Como mencionamos anteriormente, con la lógica de React, los accesorios deberían ser la única forma en que un elemento padre debería interactuar con los componentes hijos. Sin embargo, en situaciones en las que está fuera de nuestra responsabilidad, la implementación del antiguo componente React o simplemente porque estamos creando un componente que utiliza una biblioteca de JavaScript que manipula el DOM normal, React nos ofrece la manera de salir del flujo de trabajo de React con las Refs.

Sin embargo, hay una recomendación, y es que debes evitar el uso de referencias para cualquier código nuevo que se pueda hacer de forma declarativa, por ejemplo, en lugar de crear métodos como abrir() y cerrar(), una prop llamada estaAbierto debería ser la mejor manera de proceder.

Cómo usar React Refs (React> = 16.3)

La forma de usar React Refs cambió desde React 16.3, que ahora debe declararse usando React.createRef():

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);

        // 1. Crear Ref en el método constructor
        this.myRefElement = React.createRef();
    }

    componentDidMount(){
        // 2. Obtenga el nodo DOM de la referencia creada y la propiedad actual (DOMNode contiene un elemento DOM, es decir, el div en este caso)
        const DOMNode = this.myRefElement.current;
    }

    render() {
        return (
            <div ref={this.myRefElement}></div>
        );
    }
}

export default MyComponent;

Para nuestro ejemplo del componente que permite al usuario obtener una vista previa de una imagen de 360 ​​grados, crearemos la referencia y usaremos el elemento DOM para inicializar la biblioteca de terceros que crea el visor:

import React, { Component } from 'react';
import ThirdParty360ViewerLibrary from 'ThirdParty360ViewerLibrary';

class ThreeSixtyViewer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            image: props.image
        };

        // 1. Crear Ref en el método constructor
        this.panoramicContainer = React.createRef();
    }

    componentDidMount(){
        // 2. Obtenga el nodo DOM
        const DOMNode = this.panoramicContainer.current;
        // si usas console.log DOMNode debería obtener el domNode real
        // <div></div>

        // En el ejemplo, deberíamos reemplazar el DOMNode de nuestra biblioteca así
        // let options = {};
        // ThirdParty360ViewerLibrary.initialize(DOMNode, options);
    }

    render() {
        return (
            <div ref={this.panoramicContainer}></div>
        );
    }
}

export default ThreeSixtyViewer;

Cómo usar React Refs (React <= 16.3)

La forma antigua de crear referencias era usar el método de devolución de llamada, por lo que en lugar de pasar una cadena como referencia, pasa una función de devolución de llamada. Entonces, cuando se produzca el renderizado, la referencia se pasará como argumento a la devolución de llamada, actualizando su valor y permitiéndote acceder al elemento DOM:

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);

        // 1. Crear Ref en el método constructor
        this.handleRef = this.handleRef.bind(this);
    }

    myDomNode = null;

    // 2. Declara la devolución de llamada del método handleRef para obtener el DOMNode
    handleRef(ref) {
        this.myDomNode = ref;
    }

    componentDidMount(){
        // <div></div>
        console.log(this.myDomNode);
    }

    // 3. Asignar callback del ref
    render() {
        return (
            <div ref={this.handleRef}></div>
        );
    }
}

export default MyComponent;

Y así de fácil es obtener acceso a un elemento DOM específico que puedes usar en tu flujo de trabajo de React. 

Que te diviertas ❤️!

References and external resources

Esto podria interesarte

Conviertete en un programador más sociable