React.js：教程中的示例不起作用
Posted
技术标签:
【中文标题】React.js：教程中的示例不起作用【英文标题】：React.js: Example in tutorial not working 【发布时间】：2014-01-21 03:35:08 【问题描述】：我正在学习来自http://facebook.github.io/react/docs/tutorial.html 的 React.js 教程。这是我的文件：
模板.html：
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx" src='tut.js'>
</script>
</body>
</html>
和 tut.js：
/** @jsx React.DOM */
var data = [
author: 'Tldr', text: 'This is a comment'
]
var CommentBox = React.createClass(
render: function()
return (
<div className='commentBox'>
<h1>Comments</h1>
<CommentList data=this.props.data />
<CommentForm />
</div>
)
)
var CommentList = React.createClass(
render: function()
var commentNodes = this.props.data.map(function(comment)
return <Comment author=comment.author>comment.text</Comment>
)
return (
<div className='commentList'>
commentNodes
</div>
)
)
var CommentForm = React.createClass(
render: function()
return (
<div className='commentForm'>
Hello World, I am a comment
</div>
)
)
var Comment = React.createClass(
render: function()
return (
<div className='comment'>
<h2 className='commentAuthor'>
this.props.author
</h2>
this.props.children
</div>
)
)
React.renderComponent(
<CommentBox data=data />,
document.getElementById('content')
)
但是当我在浏览器中打开它时，我只看到一个没有任何 cmets 的空白页面。我做错了什么？
【问题讨论】：
浏览器的js控制台有消息吗？ 我在控制台中收到以下错误：'XMLHttpRequest 无法加载文件：//localhost/Users/jashua/Desktop/code/react/tut.js。仅 HTTP 支持跨源请求。当我将 js 粘贴到脚本标签中时，一切正常。如何解决跨源错误？ 我不明白，没有一个答案是一个解决方案。没有教程、博客或示例提到如何在您的机器上运行一个简单的示例，而最终必须为您提供服务。控制台也打印“使用反应开发工具”，但我不能 为简洁、标准的方法添加了一个赏金，以开始使用一个简单的反应示例**在我的机器上我也知道我需要指向哪些文件。 （不是关闭 codepen 或一些复杂的 npm 模块设置）。什么是最简单的骨架设置。所以人们可以理解它是如何适合的。 【参考方案1】：Chrome 不允许您通过 XHR 加载 file:// 网址（正如在其他地方提到的，浏览器内转换的工作方式）。你有几个选择：
【讨论】：
Python 服务器提示有帮助！【参考方案2】：以下命令对我有用。但在命令之前，您可能需要无论如何停止chrome进程，可以从任务管理器中。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security第二种方式，你也可以在 chrome 快捷方式属性中使用 --allow-file-access-from-files 标志。但这仅建议用于开发目的。
【讨论】：
【参考方案3】：JSXTransformer 尝试使用 ajax 加载源。这不适用于file:// 路径。
这意味着您应该使用 HTTP 服务器（apache、grunt connect 等）为您的小项目提供服务，或者将您的脚本源直接放在脚本标签中。
【讨论】：
【参考方案4】：对于 chrome，您可以尝试禁用原点检查，更多详细信息可以在Disable same origin policy in Chrome 中找到。当然，仅用于开发。
【讨论】：
【参考方案5】：无论出于何种原因，本地网络服务器似乎不足以在 Chrome 上完成此操作。使用 Python 3.4 并通过 http://localhost:8000 查看我的网站时出现以下错误：
在源“https://fb.me”的重定向已被跨源资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:8000' 因此不允许访问。
...考虑到教程中包含的 Babel 脚本没有给出相同的错误，这很奇怪。
我可以通过删除用于加载 react 和 react-dom 的 script 标记上的 integrity 和 crossorigin 属性来解决这个问题，更改：
<script src="https://fb.me/react-0.14.7.min.js"
integrity="sha384-zTm/dblzLXQNp3CgY+hfaC/WJ6h4XtNrePh2CW2+rO9GPuNiPb9jmthvAL+oI/dQ"
crossorigin="anonymous"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"
integrity="sha384-ntqCsHbLdMxT352UbhPbT7fqjE8xi4jLmQYQa8mYR+ylAapbXRfdsDweueDObf7m"
crossorigin="anonymous"></script>
收件人：
<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
【讨论】：
【参考方案6】：从 Paul O'Shannessy 的回答中扩展 #2。
很好的解决方案是：
如果你有python2.x：
$ cd /myreact-project/htmlfiles/
$ python -m SimpleHTTPServer
对于python3.x
$ cd /myreact-project/htmlfiles/
$ python -m http.server
然后，您可以将浏览器指向 http://192.168.1.2:8000/<myfile.html> 或 python 模块为您的文件提供服务的任何位置，并从任何浏览器轻松使用它。
【讨论】：
【参考方案7】：我用你的代码和它的工作创建JSFiddle。想一想，尝试将您的脚本从head 移动到tut.js 之前。
另外，不要忘记列表渲染组件中的key 属性。我将它添加到 Fiddle。
【讨论】：
这是一个本地问题，这个问题在 JSFiddle 上无法证明。以上是关于React.js：教程中的示例不起作用的主要内容，如果未能解决你的问题，请参考以下文章
React JS 中的 CSS 模块不起作用，我已经尝试了所有方法，但没有解决
React.JS - 我正在尝试将 .js 文件中的函数导入 .jsx 文件，但它仍然不起作用。无法读取 null 的属性“单击”