如何在React.js中通过组件之间进行通信-Java 学习之路

好吧，我知道通过 refs 父母和孩子之间的沟通或使用 this.props.onClick = {this.props.onClick} ，我陷入了祖父母和孩子之间的情况沟通，就像这样：

说我们有一些博客，一旦我们点击博客 Headers ，相应的博客内容就会显示，所以我们创建了三个组件：BlogAdmin，BlogTitle和Blog（这里我们只关注BlogAdmin和BlogTitle）

单击BlogTitle时，我想通知BlogAdmin set currentblog以指定博客 . 但我不知道如何传递数据以及如何触发事件，更好地使用pubSub .

下面是我的例子，我删除了一些数据获取/设置和语法清楚 .

var BlogTitle = React.createClass({
  render: function() {
    return
      <li>{this.props.blog.title}</li>
  }
});

var BlogTitles = React.createClass({
  render: function() {
    return 
      <ul>
        {this.state.blogs.map}
          <BlogTitle blog={blog} />
  }
})

var BlogAdmin = React.createClass({
  render: function() {
    return 
      <BlogTitles />
      <BlogContent />
  }
})

1 回答

简单的解决方案是添加一个回调函数并将其一直发送到这样：

var BlogTitle = React.createClass({
  render: function() {
    return
      <li onClick={this.handleTitleClick}>{this.props.blog.title}</li>
  },

  handleTitleClick: function() {
      this.props.onBlogTitleSelection(this.props.blog);
  }
});

var BlogTitles = React.createClass({
  render: function() {
    return 
      <ul>
        {this.state.blogs.map}
          <BlogTitle blog={blog} onBlogTitleSelection={this.props.onBlogTitleSelection} />
  }
})

var BlogAdmin = React.createClass({
  selectBlogTitle: function(blog) {
    // act!
  },

  render: function() {
    return 
      <BlogTitles onBlogTitleSelection={this.selectBlogTitle} />
      <BlogContent />
  }
})

回复于 2024-05-02T12:38:30+08:00

如何在React.js中通过组件之间进行通信

1 回答

相关问题