ReactJS屏幕方向变化监听器失效问题排查求助

嘿，我一眼就看到问题所在啦！你把onOrientationChange事件绑定在了<div>元素上，但屏幕方向变化事件是属于window全局对象的，普通DOM元素根本不会触发这个事件，所以你的控制台自然不会输出任何信息～

下面我给你修正代码，顺便实现你想要的「横竖屏按钮位置不同」的需求：

修正后的完整代码 #

import React, { Component} from "react";
import { Link } from "react-router-dom";
import "../style/App.css";
import { Typography, Button, Card, Grid } from "@material-ui/core";
import homepage2 from "../images/homepage2.png";

export default class WelcomeComponent extends Component {
  // 用状态保存当前屏幕方向：true为竖屏，false为横屏
  state = {
    isPortrait: window.innerHeight >= window.innerWidth
  };

  // 组件挂载完成后，给window添加事件监听
  componentDidMount() {
    // 监听设备方向变化事件
    window.addEventListener('orientationchange', this.handleOrientationChange);
    // 兼容不支持orientationchange的设备，用窗口 resize 事件兜底
    window.addEventListener('resize', this.handleOrientationChange);
  }

  // 组件卸载前移除监听，避免内存泄漏
  componentWillUnmount() {
    window.removeEventListener('orientationchange', this.handleOrientationChange);
    window.removeEventListener('resize', this.handleOrientationChange);
  }

  // 方向变化的处理函数
  handleOrientationChange = () => {
    console.log('changed orientation');
    // 更新状态，重新判断屏幕方向
    this.setState({
      isPortrait: window.innerHeight >= window.innerWidth
    });
  }

  render() {
    const { isPortrait } = this.state;
    // 根据屏幕方向动态设置按钮样式
    const buttonStyle = isPortrait 
      ? { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }
      : { position: "absolute", bottom: "30px", right: "30px" }; // 横屏位置可自行调整

    return (
      <div style={{ minHeight: "100vh", backgroundImage: `url(${homepage2})`, backgroundPosition: "center", backgroundSize: "cover" }} >
        <div style={{ textAlign: "center", verticalAlign: "bottom", bottom: "0px" }} >
          <Link to="/Language">
            <Button 
              variant="contained" 
              color="secondary" 
              size="large" 
              style={buttonStyle}
            >
              CONTINUE
            </Button>
          </Link>
        </div>
      </div>
    );
  }
}

关键修正点说明 #

• 事件绑定对象错误：把事件从<div>移到window上，这才是orientationchange事件的正确触发对象。
• 添加生命周期监听：在componentDidMount里绑定事件，componentWillUnmount里移除，避免组件卸载后残留事件监听导致内存泄漏。
• 兼容处理：加入resize事件监听，因为部分桌面设备或旧设备不支持orientationchange，通过判断窗口宽高比来确定屏幕方向更可靠。
• 动态样式切换：用组件状态保存屏幕方向，渲染时根据状态给按钮设置不同的位置样式，实现横竖屏不同布局。

测试方法 #

在Chrome的iPhoneX模拟器中：

1. 按下Ctrl+Shift+M打开设备工具栏
2. 点击工具栏里的「旋转屏幕」按钮（或者用快捷键Ctrl+Shift+Arrow）
3. 此时控制台应该会输出changed orientation，按钮位置也会跟着横竖屏切换变化～

内容的提问来源于stack exchange，提问作者Prashin Jeevaganth