Question

作为所有内容的序言，我正在尝试通过使用Chrome的内置设备断点模拟器来优化我的应用，以提供移动体验。我很清楚这不是一个完美模拟移动设备（iOS / Android）环境的工具。所有这些要说的是，我目前不知道我要描述的这个问题是由于该工具的性质不像那些事情那样还是我为我编写的代码确实存在内在错误应用程序。

总而言之，我在顶级App组件中具有以下设置：

<Route path='/' component={(props) => {
  return session.userIsAuthenticated ? (
    <AuthenticatedMobileMenu {...this.props} />
  ) : (
    <MobileMenu {...this.props} />
  )
}}/>

由于某种原因，我无法解释，当我执行以下操作时，总是会触发<Route>组件渲染逻辑...

鉴于我是从Chrome中“模拟”设备上的“纵向”开始的。

从肖像旋转到风景
从横向旋转回纵向（始终使<Route>组件功能运行）

重新运行组件功能导致我不希望有的丢失状态，因为它总是返回新的菜单组件作为最终结果。我无法弄清楚为什么重新运行会在模拟设备的方向更改时发生，并希望其他人知道。

还有更多要分享的东西。

我的顶级App组件是有状态的（不是无状态的），并且我没有在React应用程序中监听任何与定向相关的事件，这些事件会触发应用程序级别的状态更改。
如果组件在从“横向” /“纵向”更改时始终触发，为什么在第一个方向上的渲染渲染触发器没有从“纵向”更改为“横向”？

只是要重申一个起点-我不知道我在代码中做错了什么还是Chrome的工具是否有错误并触发了这种行为，而这种行为在真实的物理设备上可能永远不会发生。'

更新1

我没有在上面的代码片段中包含重要的细节，因为我发现这是定向问题的根本原因。我的<Route>组件包装在React Responsive <Tablet>组件中。定义为：

// @flow
import React from 'react'
import Responsive from 'react-responsive'

import {ViewBreakpoint} from '../constants/ViewBreakpoint'

type Props = {
  maxWidth?: boolean,
  rest: any
}

export const Tablet = ({maxWidth, ...rest}: Props) => (
  maxWidth ? (
    <Responsive {...rest} maxWidth={ViewBreakpoint.MAX_WIDTH_TABLET} />
  ) : (
    <Responsive {...rest} minWidth={ViewBreakpoint.MIN_WIDTH_TABLET} />
  )
)

所以我的代码片段实际上是以下内容：

<Tablet maxWidth>
  <Route path='/' component={(props) => {
    return session.userIsAuthenticated ? (
      <AuthenticatedMobileMenu {...this.props} />
    ) : (
      <MobileMenu {...this.props} />
    )
  }}/>
</Tablet>

我通过移除<Tablet>周围的包装<Route>组件确认了问题所在，并且旋转时不再触发该组件功能。

尽管如此，我仍然需要保持这种行为，因为此移动菜单应仅在手机和平板电脑上出现。我不想在DOM树中获得桌面体验。

在设备方向更改时停止从触发组件渲染停止React Router DOM <route>

0 个答案: