React.js:教程中的示例不起作用 [英] React.js: Example in tutorial not working
本文介绍了React.js:教程中的示例不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在从 http://facebook.github.io/react/docs做React.js教程/tutorial.html .这是我的文件:
I'm doing the React.js tutorial from http://facebook.github.io/react/docs/tutorial.html. Here are my files:
template.html:
template.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')
)
但是，当我在浏览器中打开它时，我只看到一个空白页面，没有任何评论.我在做什么错了?
But when I open it in the browser, I just see a blank page without any comments. What am I doing wrong?
推荐答案
Chrome浏览器不允许您通过XHR加载 file://网址(如其他地方所述，这是浏览器内部转换的工作方式).您有两种选择:
Chrome doesn't let you load file:// urls via XHR (which as mentioned elsewhere is how the in browser transform works). You have a couple options:
- 使用其他浏览器.我知道Firefox可以使用.
- 启动本地Web服务器(Python附带了一个本地Web服务器，因此，如果安装了该服务器，则非常简单- 查看全文
