react非父子组件传值

非父子组件传值

react的非父子组件传值可以是使用订阅模式

• 首先定义订阅者

    // 创建一个observer.js文件
    const observer = {
     
        list: [], // 用力收集所有的函数
        subscribe(callback) {
      // 接收dispatch触发的函数的方法
            this.list.push(callback)
        }

        dispatch(data) {
      // 触发事件的方法
            this.list.forEach(item => {
     
                item(data)
            })
        }
    }

• 定义子组件一 用来接收数据

import {
     Component} from 'react'
import observer from 'observer.js'
class Child1 extends Component {
     
    componentWillMount() {
     
        observer.subscribe((data) => {
     
            console.log(data) // 该data就是其他组件传递过来的数据
        })
    }
    render() {
     
        return <div></div>
    }
}

export default Child1

• 定义子组件二 用来传递数据 以点击事件为例

import {
     Component} from 'react'
import observer from 'observer.js'
class Child2 extends Component {
     
    trsData = () => {
     
        observer.dispatch('这是我要传递的数据')
    }
    render() {
     
        return <div>
            <button onClick={
     this.trsData}>点击</button>
        </div>
    }
}
export default Child2

• 定义父组件

import {
     Component} from 'react'
import Child1 from 'Child1.js'
import Child2 from 'Child2.js'
class Parent extends Component {
     
    trsData = () => {
     
        observer.dispatch('这是我要传递的数据')
    }
    render() {
     
        return <div>
            <Child1/>
            <Child2/>
        </div>
    }
}
export default Parent