Semantic-UI-React 响应式组件渲染元素，尽管有 minWidth/maxWidth prop

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，我整理了一个快速的 codesandbox 示例，只是为了确保您尝试实现 min/max 宽度道具的方式没有问题。从这个例子中可以看出，它们确实按预期工作。 https://codesandbox.io/s/98pk46l7vr

没有看到您的组件或应用程序的其余部分，问题可能是由于您的路由器中的某些内容引起的。我建议您尝试删除作为 Responsive 组件的 children 返回的其他一些组件，以查看它是否按预期开始工作（就像在我的 codesandbox 示例中一样）。如果有效，那么您就知道问题出在 children 中的某处。如果它不起作用，那么您的应用中存在更大的问题。

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

Semantic-UI-React 响应式组件渲染元素，尽管有 minWidth/maxWidth prop

Semantic-UI-React Responsive component renders element in spite of minWidth/maxWidth prop

reactjs

semantic-ui

semantics

semantic-ui-react