React Web App Routing 适用于桌面（包括移动开发视图），但不适用于移动浏览器

Posted 2023-02-22

【中文标题】React Web App Routing 适用于桌面（包括移动开发视图），但不适用于移动浏览器

【英文标题】：React Web App Routing Works on Desktop (incl. Mobile Dev View), but not on Mobile Browsers

【发布时间】：2020-06-15 01:58:37

【问题描述】：

我真的被我正在构建的 React Web 应用程序的问题所困扰。我正在使用 array.map() 方法来动态创建下拉列表，我发现一切都在桌面浏览器上运行良好（包括在 Chrome 开发工具的移动视图中），但在实际的移动浏览器上却没有。非常感谢您的想法！

预期行为

我希望填充下拉列表，通常来自对象数组。然后，当用户单击下拉菜单中的一个项目时，它将触发 (1) 一个函数或 (2) 到 React 应用程序另一部分的链接。请注意，我使用 react-router-dom 来处理路由。

在移动浏览器上观察到的行为

下拉列表填充正确，但当我从选项中进行选择时它们会出现故障（参见图 1）。

当下拉选择同时触发（react-router-dom 组件）并调用函数时，可以观察到此行为。在有限的情况下，当函数被正确调用时，正确的参数被传递并且函数确实正确执行。

代码片段

这是我用来生成链接列表的代码示例。它是一个简单的 React 功能组件，用作我应用中所有设置页面的标题，以及组件是React MaterializeCSS 库的一部分，它似乎工作正常。：

const SettingsHeader = () => 

    let  url  = useRouteMatch();
    
    const  userAccess, styleItem, headerStyle, updateHeader, theme  = useContext(SettingsContext);

    const options = userAccess.length ? (
      userAccess.sort().map(permission => 
        // Returns an object with details needed to build the component via a Settings Context function.
        let details = styleItem(permission);
        return (
          <Link
            key=permission
            to=`$url$details.link`
            onClick=() => updateHeader(permission)
          >
            <Icon className=theme.text>details.icon</Icon>
            <span className=theme.text> details.text</span>
          </Link>
        );
      )
    ) : (
      <h4 className="grey-text">
        <Icon>warning</Icon> You don't have permission to edit any settings.
      </h4>
    );
    
    return (
      <h4 className=theme.text>
        <i className="material-icons">headerStyle.icon</i> headerStyle.text
        <Dropdown
          options= ... 
          trigger=
            <Button className="right " + theme.themeColor node="button">
              Views
            </Button>
          
        >
          options
          <a href="#!">
            <Icon className="grey-text">close</Icon>
            <span className="grey-text"> Close</span>
          </a>
        </Dropdown>
      </h4>
    );

这是我用来生成主题选项列表的代码示例，每个主题选项都调用我在应用程序的许多地方使用的 React 上下文组件中的一个函数：

const ThemeSettings = () => 

  // Brings in Theme update function from SettingsContext
  const  changeTheme, theme  = useContext(SettingsContext);

  // Array of possible themes.
  const themesList = ['Burnt Orange', 'Chrome', 'Deep Purple', 'Earth', 'Fresh Green', 'Green', 'Maroon', 'Navy', 'Pink', 'Red', 'Royal Blue', 'Teal']

  const themeOptions = themesList.map(theme => 
    let themeObject = getTheme(theme);

    return (
      <a href="#!" key=theme onClick=(e) => changeTheme(e, theme) >
        <Icon className=themeObject.text>style</Icon>
        <span className=themeObject.text> theme</span>
      </a>
    )
  );

  return (
    <Dropdown
      options= ... 
      trigger=
        <Button className="left " + theme.themeColor node="button">
          Themes
        </Button>
      
    >
       themeOptions 
      <a href="#!">
        <Icon className="grey-text">close</Icon>
        <span className="grey-text"> Close</span>
      </a>
    </Dropdown>
  );

非常感谢您看一下！

【参考方案1】：

这是一个known MaterializeCSS 错误，适用于运行 ios-13 的设备。

在撰写本文时，我只能找到一种可用的解决方法，Falk 在this issue thread 中提到：

要修复它，我必须检查 #v1-dev 分支 https://github.com/Dogfalo/materialize，使用 grunt release 构建它 并为我的项目使用 /dist 文件夹中的 materialize.js。

【讨论】：

这是一个选择问题，提问者正在查询一个下拉问题。它们是 materializecss 中的不同（尽管连接）元素。