当前位置: 首页 > 面试题库 >

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

劳高爽
2023-03-14
问题内容

我正在从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')
)

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


问题答案:

Chrome浏览器不允许您file://通过XHR 加载网址(如其他地方所述,这是浏览器内部转换的工作方式)。您有两种选择:

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


 类似资料:
  • 我正在尝试JUnit5TestContainers快速启动示例:

  • 问题内容: 我是Socket.IO的100%新手,并且刚刚安装了它。我试图遵循一些示例,并且可以使服务器端运行,但似乎无法使客户端连接。 以下是我的server.js: 这是我的index.html 当我执行node server.js时,它指示socket.io已启动。 当我加载index.html时,出现一行,指出“调试-服务静态/socket.io.js”,但除此之外,没有控制台消息或其他行

  • 问题内容: 我正在尝试运行JavaKinesisWordCountASL示例。 该示例似乎连接到我的Kinesis Stream并从该流中获取数据(如下面的日志所示)。但是,在示例中,Sparks不会调用传递给unionStreams.flatMap方法的调用函数,并且不会打印任何单词计数。 我尝试同时使用Java 8和Java 7运行。我正在ubuntu实例上运行它。相同的示例适用于我的Macb

  • 我已经按照说明实现了facebook android cognito示例cognitosyncdemo,在尝试同步数据集时出现以下错误, E/ListDatasetsActivity(8541):原因:com.amazonaws.AmazonServiceException:检测到1验证错误:“登录”处的值“{graph.facebook.com=}”无法满足约束:映射值必须满足约束:成员的长度必

  • 我用泽西岛写了一个非常简单的例子。我从泽西岛网站下载了最新的jar文件到WEB-INF的lib文件夹中。我的课程和在下面。 当我提供URL我得到。 然而,当我使用Maven时,它是有效的。我用的是Eclipse开普勒,Glassfish 4服务器,Java 7。 非Maven版本我做错了什么? 谢谢。 类: Web.xml:

  • 问题内容: 我正在研究并尝试制作一个简单的应用程序。这是代码: 编辑: 我的错,抱歉,但主要问题仍然存在。这是更正的代码: 但是,当我尝试启动它时,出现以下错误: 这可能是什么原因? UPD: 这是其余的痕迹: 问题答案: 这可能是什么原因? 的原因是您尚未向程序传递任何参数。因此,不会引用有效的数组索引(顺便说一句:我将创建一个单独的局部变量,而不是分配给该数组。从技术上讲,这是可能的,但我不会