1

json データを使用して反応コンポーネントを初期化する必要がありますが、material-ui でこれを行う方法がわかりません。

これは私が反応する方法です：

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>
    );
  }
});

React.render(
  <CommentBox url="comments.json" />,
  document.getElementById('content')
);

しかし、私は現在、すべてのページが反応によって読み込まれるマテリアルUIとルートを備えた単一ページアプリケーションを使用していますが、jsonを個々のページに渡す方法がわかりません。私はcomments.jsonを私のホームコンポーネントに送信する次の方法でそれを使用したいと思います:

<Route name="root" path="/" handler={Main}>
   <Route name="home" url="comments.json" handler={Home} />
   <DefaultRoute handler={Home}/>
</Route>

どういうわけかこれを達成することは可能ですか？

4

1 に答える 1

1

これを行う最も簡単な方法は、 jquery ajaxjsonのようなものを使用してcomponentWillMountメソッドにロードすることです:

var CommentList = React.createClass({
  componentWillMount: function () {
    $.get('comments.json').done(function (json) {
      this.setState({comments: json});
    }.bind(this));
  },
  render: function() {
    var commentNodes = this.state.comments.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

明らかに、コンポーネントで ajax 呼び出しを実行しMain、データを小道具として渡すことができますが、アイデアは得られます。

于 2015-09-22T10:10:23.787 に答える