Question

我在做http://facebook.github.io/react/docs/tutorial.html的React.js教程。这是我的文件：

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

但是当我在浏览器中打开它时，我只看到一个没有任何评论的空白页面。我做错了什么？

Answer 1

Chrome不允许您通过XHR加载file://网址（其他地方提到的是浏览器转换的工作原理）。你有几个选择：

使用其他浏览器。我知道Firefox有效。
启动一个本地Web服务器（Python附带一个，所以如果你安装了它，那很简单 - http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python）。
将脚本内联而不是单独的文件。这对于像这样简单的事情是可行的，但是当你的代码变得更复杂时，你会想要尝试其他选项之一。

Answer 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 标记。但建议仅用于开发目的。

Answer 3

JSXTransformer尝试使用ajax加载源代码。这不适用于file://路径。

这意味着您应该使用HTTP服务器（apache，grunt connect等）为您的小项目提供服务，或者将脚本源直接放在脚本标记中。

Answer 4

对于chrome，您可以尝试禁用原点检查，可在Disable same origin policy in Chrome中找到更多详细信息。当然，只能用它来开发。

Answer 5

无论出于何种原因，本地网络服务器在Chrome上看起来不够用。使用Python 3.4并通过http://localhost:8000查看我的网站我收到以下错误：

重定向原点＆＃39; https://fb.me＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8000＆＃39;因此不允许访问。

...考虑到教程中包含的Babel脚本没有给出相同的错误，这很奇怪。

我能够通过删除用于加载react和react-dom的integrity标记上的crossorigin和script属性来解决这个问题，更改：

<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>

Answer 6

从 Paul O＆＃39; 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模块为您的文件提供服务的地方，并在任何浏览器中使用它而不会有麻烦。

Answer 7

我使用您的代码及其工作创建JSFiddle。一想，尝试将脚本从head移到tut.js之前。另外，不要忘记列表呈现组件中的key属性。我把它添加到了Fiddle。

React.js：教程中的示例不起作用

7 个答案: