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

小编典典

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

reactjs

我正在尝试学习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.

怎么了

阅读 250

2020-07-22

共1个答案

小编典典

您收到该错误的原因是：

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

当您将jsx脚本包含在index.html文件中时，它可以正常工作，因为无需任何请求即可检索jsx脚本。

您需要做的是在Web服务器上握手，将hello
world文件放入该服务器的文档根目录，然后从Web服务器（例如，从URL）加载它们http://localhost/index.html。

2020-07-22