react组件中监听window的resize事件，实现响应式

柔情只为你懂 2021-06-22 15:38 441阅读 0赞

所谓响应式，就是页面在不刷新的情况下，拖到不同尺寸的显示器上，或者鼠标放大、缩小浏览器时（当浏览器窗口尺寸发生变化时），页面中的内容会自动适配窗体大小。

目前很多js库都具有响应式功能，例如：bootstrap下的各种库。

在html页面中，我们可以通过监听window的resize事件来完成各个组件的大小设置。同样，react组件代码中，我们也可以通过同样的方式来实现，例如：

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

发表评论取消回复

表情：

评论列表（有 0 条评论，441人围观）

还没有评论，来说两句吧...

相关阅读

相关 C 实现Window/DOS 键盘监听事件

今天是重新复习C语言实现的第一天，今天想编写C 对Windwos/Dos 键盘事件的学习。但是我在安装Visual Studio 2022 没有安装MFC 框架，今天记录下VS

分手后的思念是犯贱/ 2023年10月15日 09:01/ 0 赞/ 37 阅读

相关基于jquery的监听某个元素高度变化resize事件

//一个jquery的插件，用于监听元素宽度高度变化，调用方式： //$("classname").bind('resize',function(){

妖狐艹你老母/ 2022年05月25日 07:29/ 0 赞/ 898 阅读

相关 React事件监听相关例子

var TestClickComponent = React.creatsClass({ handleClick: function(even

阳光穿透心脏的1/2处/ 2022年05月21日 12:43/ 0 赞/ 143 阅读

相关 VueJs 监听 window.resize 方法---窗口变化

> Vuejs 本身就是一个 MVVM 的框架。 > > 但是在监听 window 上的事件时，往往会显得力不从心。 > > 比如这次是 window

た入场券/ 2022年05月21日 06:44/ 0 赞/ 362 阅读

相关 React-Native中事件监听DeviceEventEmitter

基本语法 react-native中事件监听时使用插件DeviceEventEmitter这个来进行实现，在这里我们进行讲解一下基本语法，如下所示 1.设置监听

朱雀/ 2022年05月17日 09:15/ 0 赞/ 710 阅读

相关 Vue组件中展示数据和响应事件

组件中展示数据和响应事件 1. 在组件中，`data`需要被定义为一个方法，例如： Vue.component('account', {

快来打我*/ 2022年03月17日 13:07/ 0 赞/ 313 阅读

相关 04-React中的响应式设计思想和事件绑定

React中的响应式设计思想和事件绑定思考？在react如何定义数据呢？？？在js中一个类肯定会有一个`constructor(){}` 构造函数，当我们使用

电玩女神/ 2022年02月22日 20:20/ 0 赞/ 137 阅读

相关原生js javascript 实现trigger（自动触发window 的resize事件）

大家都知道 jQuery有个 trigger 方法，可以触发被选元素的指定事件类型。那么在原生js中怎么实现 trigger 的方法呢？首先上代码： ![20190613

柔光的暖阳◎/ 2022年01月16日 02:21/ 0 赞/ 281 阅读

相关在 React 组件中监听 android 手机物理返回/回退/back键事件

当前端页面嵌入到 webview 中运行时，有时会需要监听手机的物理返回按键事件来做一些自定义的操作。比如我最近遇到的，在一个页面里面有批量选择的功能，当点击手机的返回键时

迈不过友情╰/ 2021年09月19日 19:22/ 0 赞/ 813 阅读

相关 react组件中监听window的resize事件，实现响应式

所谓响应式，就是页面在不刷新的情况下，拖到不同尺寸的显示器上，或者鼠标放大、缩小浏览器时（当浏览器窗口尺寸发生变化时），页面中的内容会自动适配窗体大小。目前很多js库都具有

柔情只为你懂/ 2021年06月22日 15:38/ 0 赞/ 442 阅读