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

本文介绍了React - 单独脚本中的组件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图学习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 / jsxsrc =src / helloworld.js>< / script> 
< / body> 
< / html>

和src / helloworld.js：

<$
< code> React.render（
< h1> Hello，world！< / h1>，
document.getElementById（'example'）
）;

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

XMLHttpRequest无法加载file：///home/marcin/Projects/react/src/helloworld.js。只有协议方案支持交叉原点请求：http，data，chrome，chrome-extension，https，chrome-extension-resource。

它有什么问题？

解决方案
你得到这个错误是因为：

您已经从本地文件系统（例如双击它）加载了 index.html ，而不是通过网页加载它服务器

JSX转换器是负责 text / jsx 脚本的一个javascript组件，它试图获取由脚本的 src 属性标记

Javascript允许获取外部资源只能从错误消息中列举的协议（甚至对于像跨域请求这样的进一步限制）;从本地文件系统加载的文件的 file：// 协议不在该列表中。

在 index.html 文件中包含 jsx 脚本时，它不起作用以检索 jsx 脚本。

您需要做的就是抓住网络服务器，将Hello World文件放入该服务器的文档根目录，并从Web服务器加载它们，例如从 http：//localhost/index.html 之类的网址。

I'm trying to learn react.js, but got stuck on "Hello World" script.
My 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>
and src/helloworld.js:
React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
When I put this code inside <script> in index.html file it works fine, but when I move it to seperate file I get blank page, and console error:
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.
What is wrong with it?
解决方案
You get that error because:
You have loaded the index.html from your local file system (e.g. by double clicking on it), instead of loading it via a web server
The JSX transformer, the one responsible of text/jsx scripts is a javascript component that tries to fetch the file specified by the src attribute of the script tag
Javascript is allowed to fetch external resources only from the protocols enumerated in the error message (and even for those has further limitation like cross-domain requess); files loaded from the local file system have the file:// protocol which is not within that list.
When you included the jsx script in the index.html file it worked as no requests were needed in order to retrieve the jsx script.
What you need to do is grab your hands on a web server, place the hello world files into the document root of that server, and load them from the web server, e.g. from an URL like http://localhost/index.html.

这篇关于React - 单独脚本中的组件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！