React 动态监听指定Dom元素变化

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