这里采用的是发布订阅者模式
订阅者交出一个回调函数,传给中央服务,发布者已发布,就调用中央服务的回调函数
创建observer.js文件 即订阅者文件
const observer = {
list: [],
subscribe(callback) {
this.list.push(callback)
},
dispatch(data) {
this.list.forEach(item => {
item(data)
})
}
}
export default observer
子组件一 接收数据
import React from 'react';
import observer from '../assets/observer';
class About extends React.Component {
componentDidMount() {
observer.subscribe((data) => {
console.log('child1定义的回调函数', data)
})
}
render() {
return <h2>hello</h2>
}
}
export default About
子组件二 传递数据的组件
import React from 'react';
import observer from '../assets/observer';
class Home extends React.Component {
render() {
return <h2 onClick={
() => {observer.dispatch('这是一条数据')}
}>hello</h2>
}
}
export default Home