首先,要写一个事件代理类作为发布者和订阅者的中介:
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
最后,在他们的父组件中调用这两个子组件
至此,即可实现兄弟组件之间的传值了!