Ad

How To Access Element In React JS That Render By JS Plugin

- 1 answer

Is there a way to access the HTML element that rendered by JS plugin in React JS Ecosystem. I can't use ref on those elements.

for example:- If I use React Slick plugin, It adds many HTML elements that can't access by React JS. I need to trigger a mouse hover event on those elements.

Does anyone have a solution for this kind of situation?

Thanks.

Ad

Answer

Suppose the id of the container div that wraps the <Slider/> component is called container then the following code should work in attaching the mouseover event to all the nodes (divs in the slider):

    componentDidMount(){
       let nodes = document.getElementsById("container").childNodes[0].childNodes
       nodes.forEach(node => {
           node.addEventListener('mouseover', () => { 
              //action to be performed here
           }
       })
    }
Ad
source: stackoverflow.com
Ad