Question

我尝试将外部react js文件包含到html文件中，但index.html中未显示任何内容。有人可以帮我吗？

react文件（index.html）中的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js" type="text/babel"></script>
  </body>
</html>

js文件（index.js）中的代码如下所示：

var App = React.createClass({
  render: function() {
    return <div>Something something Dark Side</div>;
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Answer 1

我觉得您正在本地打开此html文件。如果是这种情况，浏览器中的URL看起来将类似于file：///Users/YourUsername/PathToYourHTMLFile/index.html

如果从浏览器devtools打开控制台，则很可能会看到CORS策略错误。有关CORS here的更多信息。 TLDR在您使用浏览器时将向src =“”属性中提供的url发送一个AJAX请求，出于安全原因，默认情况下，浏览器将仅允许您向共享同一服务器的资源发送请求，但由于没有为HTML和Javascript文件运行服务器，CORS阻止了该请求。

更新： https://reactjs.org/docs/add-react-to-a-website.html提供的CORS问题的解决方法是在正文中添加具有“ crossorigin”属性的脚本。

这样做之后，您会发现React组件仍然无法正确渲染。如果您在控制台中查看，将会出现错误 “未捕获的SyntaxError：意外的令牌<”。那是因为您试图使用JSX来渲染元素。浏览器仅了解html和javascript； JSX是“ JavaScript的语法扩展”，必须先进行编译，然后浏览器才能理解。

TLDR：该语法导致您的组件无法加载。试试这个：

index.js

var App = React.createElement('div', false, 'something something darkside');

ReactDOM.render(
  App,
  document.getElementById('app')
);

上面我们用React api提供的顶级函数（React.createElement）替换了JSX。编译JSX时，它将输出相同的内容。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="./index.js"></script>
</body>
</html>

如果您刚开始使用React，我强烈推荐reactjs.org上的教程

React.js-将外部reactjs文件包含到html

1 个答案: