如何修复 React.js iOS 空白屏幕？答案

【问题标题】：How do I fix React.js iOS blank screen?如何修复 React.js iOS 空白屏幕？
【发布时间】：2019-03-17 21:27:09
【问题描述】：

我所有的 React.js 应用程序都能在我测试过的所有桌面浏览器（chrome、edge、IE、firefox）中完美运行。但是，当我尝试在我的 iphone 上打开它们时，无论是 chrome 还是 safari，我都会看到一个空白屏幕。

下面是一个在桌面上运行但在 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>

解决办法是什么？

【问题讨论】：

参见使用fetch:stackoverflow.com/a/61201183/470749

标签： javascript ios reactjs safari

【解决方案1】：

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

我 iPhone 上的 safari 版本不支持我在代码中使用的 ES6 箭头函数。

将所有箭头函数替换为 function(){} 解决了该问题。

【讨论】：

值得尝试升级设备上的操作系统，然后可能会更新网络浏览器本身

【解决方案2】：

你应该总是把你的脚本放在文档的末尾，像这样

<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>

【讨论】：

感谢您的回复。你能解释一下这有什么不同吗？我不太明白。
因为
这是一个一般建议，要解决您的问题，您需要在手机上调试网站，通过 USB 连接您的 iPhone，然后从 macOS Safari > 开发菜单中，您会发现您的 iPhone 作为目标。或者使用 chrome 代理开发工具，我猜这与您的网络连接有关，您无法从 PC 上正确检索手机上的捆绑包