Fatal编程技术网
  • javascript/
  • Javascript React.js：教程中的示例不起作用

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

javascript reactjs

Javascript React.js：教程中的示例不起作用,javascript,reactjs,Javascript,Reactjs,我正在从中学习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

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

/**@jsx React.DOM*/
风险值数据=[
{作者：'Tldr'，文本：'This is a comment'}
]
var CommentBox=React.createClass({
render:function（）{
返回(
评论
)
}
})
var CommentList=React.createClass({
render:function（）{
var commentNodes=this.props.data.map（函数（注释）{
返回{comment.text}
})
返回(
{commentNodes}
)
}
})
var CommentForm=React.createClass({
render:function（）{
返回(
你好，世界，我是一个评论
)
}
})
var Comment=React.createClass({
render:function（）{
返回(
{this.props.author}
{this.props.children}
)
}
})
React.renderComponent(
,
document.getElementById（'content'）
)
但当我在浏览器中打开它时，我只看到一个没有任何注释的空白页。我做错了什么？

我对您的代码及其工作非常满意。想一想，试着把你的脚本从
head
移动到
tut.js
之前。
另外，不要忘记列表渲染组件中的
键
属性。我把它添加到了Fiddle中。

JSXTransformer试图使用ajax加载源代码。这不适用于
文件：//
路径

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

Chrome不允许您通过XHR加载
文件：//
URL（正如其他地方提到的，浏览器内转换是如何工作的）。您有两个选择：

  • 使用不同的浏览器。我知道Firefox很管用
  • 启动一个本地web服务器（Python附带一个，所以如果您已经安装了它，它非常简单-）
  • 将脚本内联放置，而不是放在单独的文件中。这对于像这样简单的事情是可行的，但是随着代码变得越来越复杂，您需要尝试其他选项之一
对于chrome，您可以尝试禁用原点检查，更多详细信息请参见。当然，仅在开发时使用此命令。

以下命令对我有效。但在发出命令之前，您可能需要停止chrome进程，不管怎样，都可以从TaskManager获得

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security “C:\Program Files（x86）\Google\Chrome\Application\Chrome.exe”--允许从文件访问文件--禁用web安全性
第二种方式，您还可以在chrome快捷方式属性中使用--允许从文件访问文件标志。但这只建议用于开发目的。

无论出于何种原因，本地Web服务器似乎不足以在Chrome上实现这一点。使用Python 3.4并通过
http://localhost:8000
我遇到以下错误：

源“”处的重定向已被跨源资源共享策略阻止加载：请求的资源上不存在“访问控制允许源”标头。因此，不允许访问源“”

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

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

<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>
致：
从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/
或者python模块为您的文件提供服务的任何地方，并且可以在任何浏览器上轻松使用

浏览器的js控制台中有任何消息吗？我在控制台中收到以下错误：“XMLHttpRequest无法加载。”file://localhost/Users/jashua/Desktop/code/react/tut.js. 跨源请求仅支持HTTP。当我将js粘贴到脚本标记中时，一切正常。我怎么才能避开交叉原点错误呢？我不明白，没有一个答案能解决这么多问题。没有任何教程、博客或示例提到如何在您的机器上只使用一个简单的示例，而最终您必须使用它。控制台还打印了“使用react-dev工具”，但我还添加了一个赏金，以简洁、标准的方式开始使用简单的react示例**在我的机器上，我知道我需要指向哪些文件。（不是关闭代码笔或一些复杂的npm模块设置）。最简单的裸体设置是什么。这是一个局部问题，这个问题在JSFIDLE上无法证明。Python服务器提示帮助！ 
$ cd /myreact-project/htmlfiles/
$ python -m http.server