Блог

Я пытаюсь изучить 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" }
];
  

Это выдает эту ошибку:

Неперехваченная ошибка типа: неопределенный не является функцией

Какие-либо подсказки по этому поводу?

С уважением.

Во фрагменте есть три шага.

Сначала определите CommentBox :

 var CommentBox = React.createClass...
  

Во-вторых, визуализируйте CommentBox и CommentList :

 React.renderComponent...
  

В-третьих, определите CommentList :

 var CommentList = React.createClass...
  

Итак, проблема в том, что объект CommentList визуализируется до CommentList определения объекта. Если бы последние два шага были переключены, то все работало бы нормально. CommentList Класс должен быть определен, прежде чем его можно будет визуализировать.

Форма комментария также определена в неправильном месте — ее необходимо определить, прежде чем на нее ссылаться. В руководстве по реагированию это неправильно: 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

...
  

У меня это произошло во время работы с учебным пособием, и я обнаружил, что объявление var data = […] в верхней части скрипта jsx решило проблему. Таким образом, может показаться, что движок неправильно поднимает переменные?