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

【问题标题】：How to access element in React JS that render by JS plugin如何访问由 JS 插件呈现的 React JS 中的元素
【发布时间】：2019-10-08 11:01:54
【问题描述】：

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

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

有没有人解决这种情况？

谢谢。

【问题讨论】：

标签： javascript html reactjs mouse mouseover

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

也许会有所帮助

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

【讨论】：

【解决方案3】：

插件有自己的类和 ID。您始终可以检查和自定义他们正在使用的类。但这可能会导致全局变化。您可以做的是为单独的组件使用自定义类和选择器。然后你可以对css进行任何更改。

【讨论】：