陣營教程 - 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有當陣列

回答

相關問題