根据设备屏幕方向调用对应组件的问题求助

嘿，我来帮你捋捋这个问题~ 你遇到的情况主要有几个关键原因，咱们一步步拆解解决：

你当前代码的核心问题 #

• 组件导出问题：你的Portrait函数没有导出，所以即使判断到竖屏状态，也没法正确引用并渲染它；而Landscape是默认导出，虽然能被引用，但这种方式没办法同时方便地使用两个组件。
• React组件渲染方式错误：你直接在if语句里写<Portrait />这种组件标签，这不是React的正确用法——React组件必须在JSX的上下文里进行条件渲染，不能像普通JS语句那样直接执行。
• 缺少屏幕方向变化监听：你当前的代码只会在页面初始加载时判断一次方向，用户旋转屏幕后不会自动更新组件。
• 判断逻辑有漏洞：没处理window.innerHeight === window.innerWidth的特殊情况（比如平板分屏、某些方形屏幕设备）。

解决方案代码示例 #

首先，先修改你的组件文件，把两个组件都改成命名导出，这样就能同时导入使用了：

// 组件文件（比如OrientationComponents.js）
export function Landscape() {
  return (
    <main>这是横屏模式的内容...</main>
  );
}

export function Portrait() {
  return (
    <main>这是竖屏模式的内容...</main>
  );
}

然后，在使用这些组件的地方，用React的状态+监听来实现动态切换：

import { useState, useEffect } from 'react';
import { Landscape, Portrait } from './OrientationComponents';

function App() {
  // 用状态存储当前是否为竖屏，初始值先判断一次
  const [isPortrait, setIsPortrait] = useState(() => {
    return window.innerHeight >= window.innerWidth;
  });

  useEffect(() => {
    // 用媒体查询监听屏幕方向变化，比监听resize更精准
    const portraitQuery = window.matchMedia('(orientation: portrait)');

    // 初始化状态
    setIsPortrait(portraitQuery.matches);

    // 方向变化时更新状态
    const handleOrientationChange = (e) => {
      setIsPortrait(e.matches);
    };

    portraitQuery.addEventListener('change', handleOrientationChange);

    // 组件卸载时移除监听，避免内存泄漏
    return () => portraitQuery.removeEventListener('change', handleOrientationChange);
  }, []);

  return (
    <div className="app-container">
      {/* 用三元运算符做条件渲染，React推荐的方式 */}
      {isPortrait ? <Portrait /> : <Landscape />}
    </div>
  );
}

export default App;

代码说明 #

• 命名导出：这样你可以在其他文件同时导入两个组件，不会像默认导出那样只能引用一个。
• 媒体查询监听：window.matchMedia('(orientation: portrait)')是专门用来监听屏幕方向的API，比监听窗口resize更高效——只有当屏幕方向真正改变时才会触发事件，不会因为窗口小幅度缩放就触发。
• 状态驱动渲染：用useState存储当前方向状态，状态变化时React会自动重新渲染对应的组件，完美实现动态切换。

这样修改后，不管是初始加载还是用户旋转屏幕，都会正确渲染对应的组件啦~

备注：内容来源于stack exchange，提问作者ndisn