react环境下利用发布-订阅模式实现兄弟组件之间传值

首先,要写一个事件代理类作为发布者和订阅者的中介:

const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function(key, fn) {
    if(this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }
    const args = [].concat(Array.prototype.slice.call(arguments, 1));
    for(let i = 0; i < args.length ; i++) {
      this.onObj[key].push(args[i]);
    } 
  },
  one: function(key, fn) {
    if(this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function(key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function() {
    let key, args;
    if(arguments.length == 0) {
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));
    if(this.onObj[key] !== undefined
      && this.onObj[key].length > 0) {
      for(let i in this.onObj[key]) {
        this.onObj[key][i].call(null, args[i]);
      } 
    }
    if(this.oneObj[key] !== undefined
      && this.oneObj[key].length > 0) {
      for(let i in this.oneObj[key]) {
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};

export default eventProxy;

上述代码段中,on 和 one 都是订阅者监听事件,不同的是 on 可以监听一个事件的多个方法,且可触发多次;one 只能监听一个事件的一个方法且只触发一次;trigger 是发布者发布事件,触发使用 one 与 on 进行订阅的函数;off 解除所有订阅了某个事件的所有函数。

其次,在其中一个兄弟组件Child1中监听事件

import React, {Component} from 'react'
import eventProxy from './eventProxy'

class Child1 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'start',
      title: 'aaa'
    }
  }
  componentDidMount() {
    eventProxy.on('msg', msg => {
      this.setState({msg})
    }, title => {
      this.setState({title})
    })
  }
  componentDidUpdate() {
    console.log('Child_1 update');
  }
  render() {
    console.log(this.state.title)
    return(<div>
      Child1 component: {this.state.msg} {this.state.title}
    </div>)
  }
}
export default Child1

再在另一个组件Child2中发布事件

import React, {Component} from 'react'
import eventProxy from './eventProxy'

class Child2 extends Component {

  componentDidMount() {
    setTimeout(() => {
      eventProxy.trigger('msg', 'end', 'bbb')
    }, 1000)
  }
  componentDidUpdate() {
    console.log('Child_2 update');
  }
  render() {
    return(<div>
      Child2
    </div>)
  }
}
export default Child2

最后,在他们的父组件中调用这两个子组件

至此,即可实现兄弟组件之间的传值了!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值