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

Question

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

我正在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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Pau*_*ssy 43

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

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

Answer 2

Mas*_*bon 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标志.但建议仅用于开发目的.

归档时间：	11 年，10 月前
查看次数：	28648 次
最近记录：	8 年，9 月前