react跨组件通信

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react跨组件通信，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1548字，纯文字阅读大概需要3分钟。

内容图文

在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
}

 

内容总结

以上是互联网集市为您收集整理的react跨组件通信全部内容，希望文章能够帮你解决react跨组件通信所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---