Semantic-UI-React Responsive 组件渲染元素尽管有 minWidth/maxWidth 属性

Question

我有一个组件，我想根据屏幕大小呈现不同的组件。如果我在移动视图上重新加载页面，一切正常，呈现 NavBarMobile 而不是 NavbarDesktop。

如果我在桌面视图中重新加载页面，则我的 NavbarMobile 会再次呈现，而不是 NavBarDesktop。

如果我开始将屏幕大小调整为移动设备并返回桌面视图，NavBarDesktop 会正确呈现。

那么，问题是在桌面视图中加载第一页，如何解决这个问题？

 const { mainAppComponents, } = this.props
    const { visible, } = this.state
    return (
      <Fragment>
        <Responsive maxWidth={767}>
          <NavBarMobile
            onPusherClick={this.handlePusher}
            onToggle={this.handleToggle}
            rightItems={rightItems}
            visible={visible}
          >
            {mainAppComponents.header}
            {mainAppComponents.routes}
          </NavBarMobile>
        </Responsive>

        <Responsive minWidth={768}>
          <NavBarDesktop rightItems={rightItems}>{mainAppComponents.header}</NavBarDesktop>
          {mainAppComponents.routes}
        </Responsive>
      </Fragment>
    )

Answer 1

Igor-Vuk，我整理了一个快速的代码框示例，以确保您尝试实现最小/最大宽度道具的方式没有问题。正如您从这个示例中看到的那样，它们实际上确实按预期工作。 https://codesandbox.io/s/98pk46l7vr

没有看到您的组件或应用程序的其余部分，问题可能是由于您的路由器中的某些问题。我建议尝试删除您作为 Responsive 组件的子级返回的一些其他组件，以查看它是否开始按预期工作（如在我的代码框示例中）。如果它有效，那么您就知道问题出在孩子的某个地方。如果它不起作用，那么您的应用中存在上述更大的问题。

如果您使用的是 SSR，则在初始加载时，内容会通过不知道视口的 Responsive 组件呈现和提供。因此，您可能还需要添加 CSS 媒体查询。