javascript - 将 AJAX 结果作为 props 传递给子组件

Question

我正在尝试使用 React 创建博客。在我的主要 ReactBlog 组件中，我正在对节点服务器执行 AJAX 调用以返回一组帖子。我想将此发布数据作为 Prop 传递给不同的组件。

特别是，我有一个名为 PostViewer 的组件，它将显示帖子信息。我希望它默认显示通过 Prop 从其父级传递过来的帖子，否则显示通过状态调用设置的数据。

目前，我的代码的相关部分如下所示。

var ReactBlog = React.createClass({
  getInitialState: function() {
    return {
      posts: []
    };
  },
  componentDidMount: function() {
    $.get(this.props.url, function(data) {
      if (this.isMounted()) {
        this.setState({
          posts: data
        });
      }
    }.bind(this));
  },
  render: function() {
    var latestPost = this.state.posts[0];
    return (
      <div className="layout">
        <div className="layout layout-sidebar">
          <PostList posts={this.state.posts}/>
        </div>
        <div className="layout layout-content">
          <PostViewer post={latestPost}/>
        </div>
      </div>
    )
  }
});

和子组件:

var PostViewer = React.createClass({
  getInitialState: function() {
    return {
      post: this.props.post
    }
  },
  render: function() {
    /* handle check for initial load which doesn't include prop data yet */
    if (this.state.post) {
      return (
        <div>
          {this.state.post.title}
        </div>
      )
    }
    return (
      <div/>
    )
  }
});

如果我将 if 语句和我 child 的渲染中的内容换成 this.props，上面的方法就可以工作了。* 但是，这意味着我以后不能通过状态更改内容，对吗？

TLDR:我想在子组件(AJAX 调用的结果)中通过 Prop 设置默认帖子，并且我希望能够通过添加 onClick 事件(另一个组件)来更改正在查看的帖子) 将更新状态。

这是解决问题的正确方法吗？

我的应用组件的当前层次结构是:

React Blog
 - Post List
  - Post Snippet (click will callback on React Blog and update Post Viewer)
 - Post Viewer (default post passed in via props)

谢谢!

编辑:

所以我最后做的是使用基于 this.state 的值在 ReactBlog 中附加 Prop 。这确保了它在我更改状态时更新并在子组件中正确呈现。但是，为此我必须将 onClick 回调链接到所有不同的子组件。这个对吗？看起来它会变得非常困惑。这是我的完整示例代码:

var ReactBlog = React.createClass({
  getInitialState: function() {
    return {
      posts: [],
    };
  },
  componentDidMount: function() {
    $.get(this.props.url, function(data) {
      if (this.isMounted()) {
        this.setState({
          posts: data,
          post: data[0]
        });
      }
    }.bind(this));
  },
  focusPost: function(slug) {
    $.get('/api/posts/' + slug, function(data) {
      this.setState({
        post: data
      })
    }.bind(this));
  },
  render: function() {
    return (
      <div className="layout">
        <div className="layout layout-sidebar">
          <PostList handleTitleClick={this.focusPost} posts={this.state.posts}/>
        </div>
        <div className="layout layout-content">
          <PostViewer post={this.state.post}/>
        </div>
      </div>
    )
  }
});

var PostList = React.createClass({
  handleTitleClick: function(slug) {
    this.props.handleTitleClick(slug);
  },
  render: function() {
    var posts = this.props.posts;

    var postSnippets = posts.map(function(post, i) {
      return <PostSnippet data={post} key={i} handleTitleClick={this.handleTitleClick}/>;
    }, this);

    return (
      <div className="posts-list">
        <ul>
          {postSnippets}
        </ul>
      </div>
    )
  }
});

var PostSnippet = React.createClass({
  handleTitleClick: function(slug) {
    this.props.handleTitleClick(slug);
  },
  render: function() {
    var post = this.props.data;
    return (
      <li>
        <h1 onClick={this.handleTitleClick.bind(this, post.slug)}>{post.title}</h1>
      </li>
    )
  }
});

var PostViewer = React.createClass({
  getInitialState: function() {
    return {
      post: this.props.post
    }
  },
  render: function() {
    /* handle check for initial load which doesn't include prop data yet */
    if (this.props.post) {
      return (
        <div>
          {this.props.post.title}
        </div>
      )
    }
    return (
      <div/>
    )
  }
});

仍然希望得到一些反馈/希望这有帮助!

Answer 1

这是一个老问题，但我认为仍然相关，所以我要投入我的 2 美分。

理想情况下，您希望将所有 ajax 调用分离到一个 Action 文件中，而不是直接在组件内部执行。无需使用 Redux 之类的东西来帮助您管理状态(此时，我建议使用 redux + react-redux)，您可以使用称为“容器组件”的东西来完成所有繁重的状态提升你然后在执行主布局的组件中使用 Prop 。这是一个例子:

// childComponent.js
import React from 'react';
import axios from 'axios'; // ajax stuff similar to jquery but with promises

const ChildComponent = React.createClass({
  render: function() {
    <ul className="posts">
      {this.props.posts.map(function(post){
        return (
          <li>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </li>
        )
      })}
    </ul>
  }
})

const ChildComponentContainer = React.createClass({
  getInitialState: function() {
    return {
      posts: []
    }
  },
  componentWillMount: function() {
    axios.get(this.props.url, function(resp) {
      this.setState({
        posts: resp.data
      });
    }.bind(this));
  },
  render: function() {
    return (
      <ChildComponent posts={this.state.posts} />
    )
  }
})

export default ChildComponentContainer;