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

IT技术 javascript reactjs
2021-05-19 04:08:38

我正在做来自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个回答

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

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

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

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

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

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

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

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