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，如果有更新，你就会失去那个 Post。

相反，将所有渲染留给您的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

您将需要找到一种Post在 ajax 回调中传递数据的方法（返回组件不会执行任何操作）。一种方法是使用setProps，例如：

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

请注意，这只能对根级组件执行（如文档中所述）。也许您需要找到一种更通用的方法来处理反应数据（Backbone 等）。

于 2014-06-21T22:46:28.343 回答