Semantic-UI-React Responsive组件首屏加载宽限属性失效问题求助

我之前也碰到过一模一样的情况！桌面端刷新页面时Responsive组件认错了屏幕尺寸，先渲染了移动端导航，但是调整窗口大小后又正常了——这本质是首屏渲染阶段（尤其是服务端渲染或客户端hydration时），组件没法准确获取当前客户端的视口宽度，导致响应式判断逻辑出错。

结合你给出的代码，我给你几个可行的修复方案：

方案1：手动获取窗口尺寸，强制同步判断逻辑 #

在组件挂载时主动获取窗口宽度，把这个值作为判断导航显示的依据，同时监听窗口resize保持响应性：

class YourComponent extends React.Component {
  state = {
    isDesktop: false,
    visible: false, // 保留你原有的state
  };

  componentDidMount() {
    // 挂载后立刻获取当前窗口宽度，更新状态
    this.updateDesktopStatus();
    // 监听窗口resize，实时更新
    window.addEventListener('resize', this.updateDesktopStatus);
  }

  componentWillUnmount() {
    // 清理监听，防止内存泄漏
    window.removeEventListener('resize', this.updateDesktopStatus);
  }

  updateDesktopStatus = () => {
    this.setState({
      isDesktop: window.innerWidth >= 768,
    });
  };

  render() {
    const { mainAppComponents } = this.props;
    const { visible, isDesktop } = this.state;
    // 用手动检测的isDesktop状态来判断渲染哪个导航
    return (
      <Fragment>
        {!isDesktop && (
          <NavBarMobile
            onPusherClick={this.handlePusher}
            onToggle={this.handleToggle}
            rightItems={rightItems}
            visible={visible}
          >
            {mainAppComponents.header}
            {mainAppComponents.routes}
          </NavBarMobile>
        )}
        {isDesktop && (
          <>
            <NavBarDesktop rightItems={rightItems}>
              {mainAppComponents.header}
            </NavBarDesktop>
            {mainAppComponents.routes}
          </>
        )}
      </Fragment>
    );
  }
}

方案2：给Responsive组件传递准确的初始宽度（针对semantic-ui-react等库） #

如果你用的是semantic-ui-react的Responsive组件，它支持通过getWidth属性手动传递窗口宽度，这样就能覆盖首屏的默认判断：

import { debounce } from 'lodash'; // 可选，用来防抖resize事件

class YourComponent extends React.Component {
  state = {
    windowWidth: typeof window !== 'undefined' ? window.innerWidth : 0,
    visible: false,
  };

  componentDidMount() {
    // 防抖处理resize，避免频繁触发
    const handleResize = debounce(() => {
      this.setState({ windowWidth: window.innerWidth });
    }, 100);
    window.addEventListener('resize', handleResize);
    // 保存清理函数
    this.removeResizeListener = () => window.removeEventListener('resize', handleResize);
  }

  componentWillUnmount() {
    this.removeResizeListener();
  }

  render() {
    const { mainAppComponents } = this.props;
    const { visible, windowWidth } = this.state;

    return (
      <Fragment>
        <Responsive
          maxWidth={767}
          getWidth={() => windowWidth} // 手动传递当前窗口宽度
        >
          <NavBarMobile
            onPusherClick={this.handlePusher}
            onToggle={this.handleToggle}
            rightItems={rightItems}
            visible={visible}
          >
            {mainAppComponents.header}
            {mainAppComponents.routes}
          </NavBarMobile>
        </Responsive>
        <Responsive
          minWidth={768}
          getWidth={() => windowWidth}
        >
          <NavBarDesktop rightItems={rightItems}>
            {mainAppComponents.header}
          </NavBarDesktop>
          {mainAppComponents.routes}
        </Responsive>
      </Fragment>
    );
  }
}

方案3：CSS媒体查询兜底，最稳妥的备份方案 #

如果上面的JS方案还偶尔出错，用CSS强制控制显示是最稳妥的——毕竟CSS媒体查询是直接基于客户端视口的，不会受JS渲染时机的影响：

/* 全局样式或者组件的CSS文件中添加 */
@media (min-width: 768px) {
  .nav-bar-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .nav-bar-desktop {
    display: none !important;
  }
}

然后给你的导航组件加上对应的类名：

<NavBarMobile 
  className="nav-bar-mobile"
  onPusherClick={this.handlePusher}
  onToggle={this.handleToggle}
  rightItems={rightItems}
  visible={visible}
>
  {mainAppComponents.header}
  {mainAppComponents.routes}
</NavBarMobile>

<NavBarDesktop 
  className="nav-bar-desktop"
  rightItems={rightItems}
>
  {mainAppComponents.header}
</NavBarDesktop>

这个方案相当于给导航加了一个“保险”，哪怕JS判断出错，CSS也能立刻修正显示状态。

总的来说，核心就是解决首屏渲染时无法准确获取客户端视口宽度的问题，你可以根据自己项目的实际情况选择其中一种方案，我个人推荐方案1+方案3组合使用，既保证逻辑准确，又有兜底措施。

内容的提问来源于stack exchange，提问作者Igor-Vuk