Реагировать учебник - светлячок есть ошибка при загрузке данных в массиве

Я следующий учебник по адресу: http://facebook.github.io/react/docs/tutorial.html Реагировать учебник - светлячок есть ошибка при загрузке данных в массиве

Я получаю следующее сообщение об ошибке в Firefox инструментов разработчика консоли:

SyntaxError: ожидается, выражение, получил '<' 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>

Update

Для TypeError, это потому, что вы заявили ваши данные после того, как вы уже пытались оказать. Поменять порядок этих двух линий:

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

Я сейчас получающий TypeError: this.props.data не определено index.html: 27: 8 – gr4vy

Я обновил мой ответ с исправлением другой ошибки, которую вы видели –

Реагировать учебник - светлячок есть ошибка при загрузке данных в массиве

ответ

Смежные вопросы