42

我正在做来自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')
)

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

4

7 回答 7

42

Chrome 不允许您file://通过 XHR 加载 url(正如其他地方所提到的,浏览器内转换的工作方式)。你有几个选择:

  • 使用其他浏览器。我知道 Firefox 有效。
  • 启动一个本地 Web 服务器(Python 附带一个,所以如果你安装了它,它非常简单 - http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python)。
  • 将脚本内联而不是放在单独的文件中。这对于像这样简单的事情是可行的,但是随着代码变得更加复杂,您将需要尝试其他选项之一。
于 2014-01-03T20:31:57.100 回答
5

以下命令对我有用。但在命令之前,您可能需要无论如何停止 chrome 进程,可以从任务管理器中。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

第二种方式,您也可以在 chrome 快捷方式属性中使用--allow-file-access-from-files标志。但这仅建议用于开发目的。

于 2015-04-26T17:50:45.273 回答
4

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

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

于 2014-01-03T20:04:17.797 回答
3

对于 chrome,您可以尝试禁用源检查,更多详细信息可以在禁用 Chrome 中的同源策略中找到。当然,仅用于开发。

于 2015-02-12T02:33:13.317 回答
2

无论出于何种原因,本地网络服务器在 Chrome 上似乎都不够。使用 Python 3.4 并通过http://localhost:8000我查看我的网站时出现以下错误:

跨域资源共享策略已阻止在源处重定向“ https://fb.me ”:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问源“ http://localhost:8000 ”。

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

我可以通过删除用于加载 react 和 react-dom 的标签上的integrityandcrossorigin属性来解决这个问题,改变: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>
于 2016-03-17T11:49:55.697 回答
0

从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 模块为您的文件提供服务的地方或任何地方,并从任何浏览器轻松使用它。

于 2017-02-18T06:09:07.157 回答
-3

我用你的代码和它的工作来创建 JSFiddle 。想一想,尝试将您的脚本从head之前移动到tut.js. 另外,不要忘记key列表渲染组件中的属性。我将它添加到小提琴。

于 2014-01-03T13:48:18.650 回答