阵营教程 - Firefox有当阵列

加载数据，我在下面教程错误： http://facebook.github.io/react/docs/tutorial.html 阵营教程 - Firefox有当阵列

我得到在Firefox的开发者工具控制台以下错误：

语法错误：预期的表现，得到了'<'tutorial.js：4：3

浏览器窗口不显示任何内容。我在教程的印象中，我应该看到在JS文件底部的数据数组中给出的信息。我打开index.html文件作为本地文件（不运行服务器）。为什么这不工作？

我的项目如下：

var Comment = React.createClass({ 
 
\t render: function() { 
 
\t \t return (
 
\t \t \t <div className="comment"> 
 
\t \t \t \t <h2 className="commentAuthor"> 
 
\t \t \t \t \t {this.props.author} 
 
\t \t \t \t </h2> 
 
\t \t \t \t \t {this.props.children} 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}); 
 
var CommentBox = React.createClass({ 
 
\t render: function() { 
 
\t \t return (
 
\t \t \t <div className="commentBox"> 
 
\t \t \t \t <h1>Comments</h1> 
 
\t \t \t \t <CommentList data={this.props.data} /> 
 
\t \t \t \t <CommentForm /> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}); 
 

 
var CommentList = React.createClass({ 
 
\t render: function() { 
 
\t \t var commentNodes = this.props.data.map(function(comment) { 
 
\t \t \t return (
 
\t \t \t \t <Comment author={comment.author}> 
 
\t \t \t \t \t {comment.text} 
 
\t \t \t \t </Comment> 
 
\t \t \t); 
 
\t \t }); 
 
\t \t return (
 
\t \t \t <div className="commentList"> 
 
\t \t \t \t {commentNodes} 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}); 
 

 
var CommentForm = React.createClass({ 
 
\t render: function() { 
 
\t \t return (
 
\t \t \t <div className="commentForm"> 
 
\t \t \t \t Hello, world! I am a CommentForm. 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}); 
 

 

 
React.render(
 
\t <CommentBox data={data} />, 
 
\t document.getElementById("content") 
 
); 
 

 
var data = [ 
 
\t {author: "Pete Hunt", text: "This is one comment"}, 
 
\t {author: "Jordan Walke", text: "This is another comment"} 
 
];

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8" /> 
 
\t \t <title>Hello React</title> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="content"></div> 
 
\t \t 
 
\t \t <script src="scripts/tutorial.js"></script> 
 
\t </body> 
 
</html>

来源

2015-08-27 gr4vy

您需要添加type="text/jsx"到您的脚本元素tutorial.js。

<script type="text/jsx" src="scripts/tutorial.js"></script>

更新

对于类型错误，那是因为你宣布你的数据，你已经尝试渲染后。互换这两行的顺序：

React.render(
    <CommentBox data={data} />, 
    document.getElementById("content") 
); 

var data = [ 
    {author: "Pete Hunt", text: "This is one comment"}, 
    {author: "Jordan Walke", text: "This is another comment"} 
];

这样：

var data = [ 
    {author: "Pete Hunt", text: "This is one comment"}, 
    {author: "Jordan Walke", text: "This is another comment"} 
]; 

React.render(
    <CommentBox data={data} />, 
    document.getElementById("content") 
);

来源

2015-08-27 17:09:35

现在我收到一个类型错误：this.props.data是未定义的index.html：27：8 – gr4vy

我更新了我的答案并修复了您所看到的其他错误 –

阵营教程 - Firefox有当阵列

回答

相关问题