react跨组件通信

在react没有类似vue中的事件总线来解决这个问题，一是我们借助它们共同的父级组件通过代理的方式来实现，但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。

import React, { Component, createContext } from 'react'

 

const {

  Provider,

  Consumer

} = createContext()

祖先与子孙之间的通信

 

 组件节点

import React, { Component } from 'react'

  import MyContext from '../context/Bus'

import Cmp2 from './Cmp2'

export default class Cmp1 extends Component {

 static contextType = MyContext

  state = {
    userinfo: {
      username: '张三',
      age: 20
    }
  }

  render() {
    return (
      <div>
        {/* 发布一个消息 父子向下N多层的传递 祖先与后代的关系 */}
      <MyContext.Provider value={this.state.userinfo}>
          <Cmp2 />
        </MyContext.Provider>
      </div>
    )
  }
}

子孙节点

import React, { Component } from 'react'

import MyContext from '../context/Bus'

export default class Cmp2 extends Component {
  // 统一数据源中的 context中的参数据数据
  // static contextType = MyContext

  render() {
    // console.log(this.context)
    return (
      <div>
        {/* {this.context} */}
        {/* 消费一下 */}
        <MyContext.Consumer>
          {
            // 函数  参数就是你订阅的数据
            value => (
              <div>
                您的姓名为：{value.username}
              </div>
            )
          }
        </MyContext.Consumer>
      </div>
    )
  }
}

Bus.js文件

import React, { createContext } from 'react'

const db = {
  user1: {
    username: '张三'
  },
  user2: {
    username: '李四'
  }
}


// 如果createContext中有参数值，则表示 Provider中的没有写value值
//相当于value的默认值
// 使用默认值，可以实现平级
//  Bus强一点，强在有数据  比vuex弱很多，只能获取
// export const MyContext = createContext(db.user1)

const MyContext = createContext(db.user1)


export {
  db,
  MyContext as default
}