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')
);

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

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

您收到该错误的原因是：

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

当您在jsx文件中包含index.html脚本时，它的工作原理是不需要任何请求来检索jsx脚本。

您需要做的是抓住Web服务器，将hello world文件放入该服务器的文档根目录，然后从Web服务器加载它们，例如：来自http://localhost/index.html等网址。

Answer 2

我建议您启动一个Web服务器。

此python -m SimpleHTTPServer将启动一个简单的Web服务器。

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

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

备注

Python预装了OSX安装，所以如果你在Mac上，那就好了。
建议不要使用Chrome标记，因为这是一个繁琐的过程。

Answer 3

我知道答案已经获得批准但作为参考我在这里发布了代码。我们可以将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 - 单独脚本中的组件不起作用

3 个答案: