天天看點

react元件中監聽window的resize事件,實作響應式

所謂響應式,就是頁面在不重新整理的情況下,拖到不同尺寸的顯示器上,或者滑鼠放大、縮小浏覽器時(當浏覽器視窗尺寸發生變化時),頁面中的内容會自動适配窗體大小。

目前很多js庫都具有響應式功能,例如:bootstrap下的各種庫。

export default class HtmlPage extends Component {
    handleResize = e => {
        // 根據寬度不同,進行你所要進行的操作
        //document.documentElement.clientHeight是頁面帶有滾動條的高度
        //e.target.innerWidth是浏覽器視窗的寬度
        if( e.target.innerWidth<1600){
             document.getElementById("indexImgId").style.display="none"
        }else{
            document.getElementById("indexImgId").style.display="block"
        }
    }
    componentDidMount(){
        //監聽視窗大小改變
        window.addEventListener('resize', this.handleResize.bind(this));
    }
    //移除監聽器,防止多個元件之間導緻this的指向紊亂
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize.bind(this));
    }
    render() {
        return (
            <div>
            
            </div>
        )
    }
}