当前位置: 代码迷 >> 综合 >> react 获取浏览器的宽度,根据不同宽度进行不同操作
  详细解决方案

react 获取浏览器的宽度,根据不同宽度进行不同操作

热度:12   发布时间:2024-01-25 13:10:53.0

js源码:

 //监听窗口大小改变

    componentDidMount() {

        window.addEventListener('resize', this.handleResize.bind(this)) 

      }

      //移除监听器,防止多个组件之间导致this的指向紊乱

    componentWillUnmount() { 

        window.removeEventListener('resize', this.handleResize.bind(this))

      }

    

    handleResize = e => {

        //e.target.innerWidth是浏览器窗口的宽度

        // 根据宽度不同,进行你所要进行的操作

        if( e.target.innerWidth<1600){

             document.getElementById("indexImgId").style.display="none"

        }else{

            document.getElementById("indexImgId").style.display="block"

        }

      }

  相关解决方案