React - 单独脚本中的组件不起作用

Question

我正在尝试学习 react.js，但卡在了 "Hello World" 脚本上。

我的index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx" src="src/helloworld.js"></script>
  </body>
</html>

和src/helloworld.js:

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

当我将此代码放入 index.html 文件中的 <script> 时，它工作正常，但是当我将它移动到单独的文件时，我得到空白页和控制台错误：

XMLHttpRequest cannot load file:///home/marcin/Projects/react/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

有什么问题吗？

Answer 1

我建议你启动一个网络服务器。

这 python -m SimpleHTTPServer 将启动一个简单的网络服务器。

您可以运行在您的目录中。在此处访问它 http://localhost:8000。

或者，您可以使用 Chrome 标志并添加此行 --allow-file-access-from-files

注释

Python 预打包了 OSX 安装，所以如果您使用的是 Mac，那很好。
Chrome flags 不推荐，因为它是一个过程很乏味。

Answer 2

您收到该错误是因为：

您已从本地文件系统加载 index.html（例如通过双击它），而不是通过网络服务器加载它
负责 text/jsx 脚本的 JSX 转换器是一个 javascript 组件，它试图获取由 script 标签的 src 属性指定的文件
Javascript 仅允许从错误消息中列举的协议中获取外部资源（甚至对于那些有进一步限制的协议，如跨域请求）；从本地文件系统加载的文件具有不在该列表中的 file:// 协议。

当您将 jsx 脚本包含在 index.html 文件中时，它起作用了，因为不需要请求来检索 jsx 脚本。

你需要做的是抓住一个 web 服务器，将 hello world 文件放入该服务器的文档根目录，然后从 web 服务器加载它们，例如来自 URL 比如 http://localhost/index.html.

Answer 3

我知道答案已获批准，但我 post 在此处编码以供参考。我们可以将 react.js 与这样的脚本任务一起使用

<!DOCTYPE html>
<html>
  <head>
   <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
</script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

React - 单独脚本中的组件不起作用

React - component in seperate script does not work

html

javascript

reactjs