0

私は反応するのが初めてで、その概念を学ぶために何かを構築しようとしています。

いくつかの反応コンポーネントを作成しましたがPost、JSON リクエストが成功した後にコンポーネントがレンダリングされない理由がわかりません。

注:PostsおよびPostListコンポーネントは問題なくレンダリングされています。

ここで何が欠けていますか？

/** @jsx React.DOM */
var Posts = React.createClass({
  render: function() {
    return (
      <div className="posts">
        <h3>Featured Jobs</h3>
        <PostList />
        <p>More Awesome Jobs →&lt;/p>
      </div>
    )
  }
});

var PostList = React.createClass({
  getInitialState: function() {
    return { posts: [
    ] };
  },

  componentDidMount: function() {
    $.getJSON('/api/posts', function(results) {
      this.setState({
        posts: results
      });
    }.bind(this));
  },

  render: function() {
    var posts = this.state.posts.map(function(post) {
      return <PostListItem post={post} />;
    });

    return <ul className='post-list'>{posts}</ul>;
  }
});

var PostListItem = React.createClass({
  handleClick: function(e) {
    var post_id = this.props.post.id;
    var path = '/api/posts/' + post_id;
    $.getJSON(path, function(post) {
      return <Post title={post.title} location={post.location} description={post.description} />;
    });
  },

  render: function() {
    return (
      <div className="post-item">
        <li key={this.props.post.id}><a href="#" onClick={this.handleClick}>{this.props.post.title}</a></li>
      </div>
    );
  }
});

var Post = React.createClass({
  render: function() {
    return(
      <div className="post">
        <h1>{this.props.title}</h1>
        <h2>{this.props.location}</h2>
        <p>{this.props.description}</p>
      </div>
      );
  }
});

ps: Rails ヘルパーを介して Posts コンポーネントをレンダリングしていますが、正常に動作していると想定できます。

前もって感謝します ：）

4

2 に答える 2

1

別の回答で言ったように、コンポーネント内で呼び出さないことを強くお勧めします。renderComponentもし私があなたのしていることを完全に誤解しているのなら、私を無視してください。

私はあなたがこのようなものを持っていると仮定しますPostListItem:

// handleClick()
$.getJSON(path, function(post) {
  React.renderComponent(Post(post), this.getDOMNode());
});

このように React を混乱させることになり、更新が行われた場合、その投稿を失うことになります。

代わりに、すべてのレンダリングを関数に任せrender、そこに分岐ロジックを入れてください。

// handleClick()
$.getJSON(path, function(post) {
  this.setState({post: post})
}.bind(this));

// render()
// probably want to have getInitialState return {post: null}
if (this.state.post) {
  return <Post data={this.state.post}/>;
} else {
  // return fallback thing
}

render任意の時点でコンポーネントがどのように見えるかを説明する必要があることを忘れないでください。そこから抜け出し、アプリケーション/コンポーネントの他の部分で DOM の変更を開始するとすぐに、ほぼ確実にバグが発生します。

于 2014-06-28T00:41:21.910 に答える
1

ajax コールバックでデータを渡す方法を見つける必要がありPostます (コンポーネントを返しても何も起こりません)。setProps1 つの方法は、次のようなものを使用することです。

$.getJSON(path, function(post) {
  Post.setProps(post);
});

これは、ルートレベルのコンポーネントに対してのみ実行できることに注意してください (ドキュメントに記載されています)。おそらく、リアクティブ データ (バックボーンなど) を処理するためのより一般的な方法を見つける必要があります。

于 2014-06-21T22:46:28.343 に答える