React 动态监听指定Dom元素变化
使用ResizeObserver对象来监听指定Dom元素(div…)的变化(width、height等等)。一般,浏览器不支持该监听对象,所以需要引入第三方库支持-resize-observer-polyfill
下载 resize-observer-polyfill
npm install resize-observer-polyfill
使用
import ResizeObserver from 'resize-observer-polyfill';
let myObserver = null
class xxx extends React.Coponent{
render(){
return (
<>
.....
</>
)
}
componentDidMount(){
myObserver = new ResizeObserver((entries,observer) => {
//console.log("entries",entries)
for(let entrie of entries){
let { width,height,left,top } = entrie
console.log("width",width)
}
})
//监听,可以多个
myObserver.observe(document.getElementByClassName('xxxx')[0])
//myObserver.observe(document.getElementByClassName('xxxx')[0])
}
componentWillUnmount(){
//取消所有被ResizeObserver对象监听的节点
myObserver.disconnect()
//取消被ResizeObserver对象监听的指定dom元素监听
//myObserver.unobserve(document.body)
}
}