如何访问由 JS 插件呈现的 React JS 中的元素

Question

有没有办法访问 React JS 生态系统中 JS 插件呈现的 HTML 元素。我不能对这些元素使用 ref。

例如：- 如果我使用 React Slick 插件，它会添加许多 HTML React JS 无法访问的元素。我需要在这些元素上触发鼠标悬停事件。

有没有人能解决这种情况？

谢谢。

Answer 1

也许会有帮助

componentdidmount{
  const elemnts = [...document.getElemetntByClassName('ClassName')]
  elements.forEach(e => e.addEventListener('mouseover', () => {
  // your code here
  }))
}

Answer 2

插件有自己的 class 和 ID。您可以随时检查和自定义他们正在使用的 class。但这可能会引起全局变化。您可以做的是为单独的组件使用自定义 class 和选择器。然后您可以在 css.

中进行任何更改

Answer 3

假设包装 <Slider/> 组件的容器 div 的 id 被称为 container 那么下面的代码应该可以附加 mouseover事件到所有节点（滑块中的 divs）：

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

如何访问由 JS 插件呈现的 React JS 中的元素

How to access element in React JS that render by JS plugin

html

javascript

mouse

mouseover

reactjs