#asp.net-mvc #reactjs
#asp.net-mvc #reactjs
Вопрос:
Я пытаюсь изучить ReactJS и обнаружил React.NET .
Следуйте инструкциям на веб-сайте автора, единственным изменением является приложение MVC 5 вместо MVC 4.
Вот jsx:
/** @jsx React.DOM */
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
React.renderComponent(
<CommentBox data={data} />,
document.getElementById('content')
);
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 CommentForm.
</div>
);
}
});
var data = [
{ Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!" },
{ Author: "Pete Hunt", Text: "This is one comment" },
{ Author: "Jordan Walke", Text: "This is *another* comment" }
];
Это выдает эту ошибку:
Неперехваченная ошибка типа: неопределенный не является функцией
Какие-либо подсказки по этому поводу?
С уважением.
Комментарии:
1. Глядя на учебник, должно ли это быть
<CommentList data={this.props.data} />
?
Ответ №1:
Во фрагменте есть три шага.
Сначала определите CommentBox
:
var CommentBox = React.createClass...
Во-вторых, визуализируйте CommentBox
и CommentList
:
React.renderComponent...
В-третьих, определите CommentList
:
var CommentList = React.createClass...
Итак, проблема в том, что объект CommentList
визуализируется до CommentList
определения объекта. Если бы последние два шага были переключены, то все работало бы нормально. CommentList
Класс должен быть определен, прежде чем его можно будет визуализировать.
Ответ №2:
Форма комментария также определена в неправильном месте — ее необходимо определить, прежде чем на нее ссылаться. В руководстве по реагированию это неправильно: http://facebook.github.io/react/docs/tutorial.html
Правильный порядок определения классов в Javascript:
var Comment = React.createClass
...
var CommentList = React.createClass
...
var CommentForm = React.createClass
...
var CommentBox = React.createClass
...
Комментарии:
1. И еще одна вещь, авторы учебника забыл добавить: в HTML-файл, вместо <script type=»text/jsx»> you need <script type=»text/jsx» src=»/tutorial.js»> (depending on where you put tutorial.js)
Ответ №3:
У меня это произошло во время работы с учебным пособием, и я обнаружил, что объявление var data = […] в верхней части скрипта jsx решило проблему. Таким образом, может показаться, что движок неправильно поднимает переменные?