¿Hay alguna manera de acceder al elemento HTML que representa el complemento JS en React JS Ecosystem? No puedo usar ref en esos elementos.

por ejemplo: - si uso el complemento React Slick, agrega muchos elementos HTML a los que React JS no puede acceder. Necesito activar un evento de desplazamiento del mouse sobre esos elementos.

¿Alguien tiene una solución para este tipo de situación?

Gracias.

0
Supun Abesekara 8 oct. 2019 a las 14:01

3 respuestas

La mejor respuesta

Suponga que el id del contenedor div que envuelve el componente <Slider/> se llama container, entonces el siguiente código debería funcionar al adjuntar el evento mouseover a todos los nodos (divs en el control deslizante):

    componentDidMount(){
       let nodes = document.getElementsById("container").childNodes[0].childNodes
       nodes.forEach(node => {
           node.addEventListener('mouseover', () => { 
              //action to be performed here
           }
       })
    }
0
Surendhar E 8 oct. 2019 a las 12:25

Los complementos tienen su propia clase e identificación. Siempre puede inspeccionar y personalizar la clase que están utilizando. Pero esto puede causar cambios globales. Lo que puede hacer es utilizar clases y selectores personalizados para componentes separados. Entonces puede hacer cualquier cambio en el CSS.

0
Rakib Uddin 8 oct. 2019 a las 12:21

Tal vez ayude

componentdidmount{
  const elemnts = [...document.getElemetntByClassName('ClassName')]
  elements.forEach(e => e.addEventListener('mouseover', () => {
  // your code here
  }))
}
0
Swartex 8 oct. 2019 a las 12:00