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组件的子项返回的一些其他组件，以查看它是否按预期开始工作（例如在我的codesandbox示例中）。如果它有效，那么你就知道这个问题出现在儿童的某个地方。如果它不起作用，那么您的应用程序中存在更大的问题。

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

尽管minWidth / maxWidth prop

1 个答案: