如何访问由JS插件渲染的React JS中的元素

Question

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

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

有没有人对这种情况有解决方案？

谢谢。

Answer 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
}
})
}

Answer 2

也许它会有所帮助

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

Answer 3

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