react非父子组件传值

react非父子组件传值

创建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