我所有的React.js应用程序都可以在我测试过的所有桌面浏览器(chrome,edge,IE,firefox)中完美运行。 但是,当我尝试在chrome或safari的iphone上打开它们时,出现空白屏幕。

以下是在桌面上运行但在iOS上显示为空白的应用示例。

<html>
  <head>
    <meta charset="utf-8">

    <title>react test</title>

    <script src="js/jquery.min.js"></script>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>

    <script>
      var h = React.createElement;

      $(document).ready(() => {
        ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
      });
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

有什么解决方案?

#1楼 票数:0

您应该始终将脚本放在文档的末尾,就像这样

<html>
  <head>
    <meta charset="utf-8">

    <title>react test</title>
  </head>
  <body>
    <div id="app"></div>


    <script src="js/jquery.min.js"></script>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>

    <script>
      var h = React.createElement;

      $(document).ready(() => {
        ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
      });
    </script>
  </body>
</html>

#2楼 票数:0

我通过大量实验解决了这一问题。

iPhone上的Safari浏览器版本不支持我在代码中使用的ES6箭头功能。

用function(){}替换所有箭头功能可解决此问题。

  ask by Daniel Fearn translate from so

未解决问题?本站智能推荐:

1回复

在React网站中使用搜索栏时,IOS键盘不会关闭

我可能采用了错误的方法,但是我正在一个具有搜索栏的React网站上工作。 在IOS / Safari上,如果用户轻按搜索键,则会出现键盘,但按“完成”并不能消除它,它会快速滑动一秒钟然后重新出现。 我还没有足够的反应经验,所以我不确定最好的方法是什么,到目前为止,我已经尝试编写一个js函数
2回复

iOS11固定模式错误

我有一个固定的模式,其中包含一些可滚动的内容和一些输入字段。 我遇到一个问题,我专注于一个输入字段,该字段弹出键盘,然后滚动。 与实际在屏幕上呈现的内容相比,DOM元素似乎未对齐。 查看屏幕截图-高亮区域应位于继续按钮所在的位置。 这意味着我无法按预期单击继续。 我以为这可能是问题所
1回复

iOS11JavaScript找不到变量`globalThis`

是否有可能JavaScript globalThis不支持与 iOS 11 或更早版本一起使用? globalThis 是否有任何解决方案,因为现在,我收到ReferenceError: main.chunk.js Can't find variable: globalThis的错误Referen
1回复

当我打开我的React应用程序时,Safari报告“意外的标记'const'”

我在 Safari 中打开 React App 时遇到问题,尤其是我的私有路由。错误: 语法错误:意外的标记“const” 我有普通的生根功能: 问题出在这个PrivateRoute 上,因为当我删除导入和标签时,它没有显示错误。 这是我的私人路线文件: 我怀疑返回的某些内容不适合 Safari,
2回复

我的React应用程序在iPhone上的一个阶段显示一个空白页面。在其他任何地方(甚至MacOS上的Safari),它都能按预期工作

我正在开发一个应用程序,用户需要填写一些个人信息来注册约会。 (不能透露太多细节,因为这是机密工作) 在某些时候,我的应用程序会打开一个“弹出”类型的组件,它只列出用户先前填写的信息。 在进行下一步注册之前,它充当概述步骤。 我在各种浏览器上试过这个。 在 PC 上,它适用于 Edge、Chrom
1回复

如何在React应用程序中检测用户是否访问了iOS(Safari和Chrome)上的站点

当用户在 iOS(Safari 和 Chrome 浏览器)上访问网站时,我需要显示一条消息。 我如何在我的 React 应用程序中管理它?
1回复

首次滑动后,在React自定义轮播组件中的IOSSafari上未触发Touchevents

我在 React 中创建了一个自定义照片轮播组件(因为外部库要么太难使用,要么没有做我想让它做的事情),你可以在移动设备上滑动到下一张/上一张照片。 在 Android 上一切正常,但它只是 IOS Safari。 问题我有一个页面可以绘制出几个轮播图。 地图中的第一个轮播效果很好。 随后的轮播将在
1回复

iOS上的Safari从下一个按钮随机复制按钮样式

我有一个页面,请用户用他们的相机拍照。 然后,我显示图片并询问他们是否要重新拍摄,或确认照片。 应该有两个具有不同样式的按钮,但是Safari有时会显示两个相同的按钮 。 似乎第二个按钮显示在第一个按钮的顶部,而分别显示在下面,但是尽管如此,它们都可以正常工作。 预期结果 该平台写