ReactJS教程在url属性处卡住_Reactjs

ReactJS教程在url属性处卡住

reactjs

ReactJS教程在url属性处卡住,reactjs,Reactjs,我当前的index.html，并且被困在externalise json文件中： <html> <head> <title>Hello React</title> <script src="https://fb.me/react-0.13.2.js"></script> <script src="https://fb.me/JSXTransformer-0.13.2.js"></

我当前的index.html，并且被困在externalise json文件中：

<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      var Comment = React.createClass({
        render: function(){
          return (
            <div className="comment">
              <h2 className="commentAuthor">
                {this.props.author}
              </h2>
              <span dangerouslySetInnerHTML={{__html:marked(this.props.children.toString(), {sanitize:true})}} />
            </div>
          );
        }
      });

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

      var CommentForm = React.createClass({
        render: function(){
          return (
            <div className="commentForm">
              Hello, world! I am a CommentForm
            </div>
          );
        }
      });
      var CommentBox = React.createClass({
        render: function(){
          return (
            <div className="commentBox">
              <h1>Comments</h1>
              <CommentList data={this.props.data} />
              <CommentForm />
            </div>
          );
        }
      });
      React.render(
        <CommentBox url="comments.json" />,
        document.getElementById('content')
      );
    </script>
  </body>
</html>

Console抱怨

此.props.data

未定义，查看服务器访问日志，它没有加载

comments.json

文件

您缺少加载注释的代码。如果在教程中向下滚动一点，您将看到可以将以下代码添加到注释框组件：

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

var CommentBox=React.createClass({
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
$.ajax({
url:this.props.url，
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
render:function（）{
返回(
评论
);
}
});

React只是视图层。您需要编写代码来检索

comments.json

。仅仅将

url

作为属性是不够的。@Brennan，除非我读到的文档模棱两可，否则会触发从注释中读取。jsonScroll向下一点：）就是它们显示该属性的实际功能的地方。哦，哈哈，这太误导人了……我明白了，我指责文件有误导性：）我不反对。

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});