Question

我所有的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>

对此有什么解决方案？

Answer 1

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

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

Answer 2

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

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

用function（）{}替换所有箭头功能可以解决此问题。

如何修复React.js iOS黑屏？

2 个答案: