zoukankan      html  css  js  c++  java
  • react兄弟之间通信

    写入组件

    import React, { Component } from 'react'
    //下面二个就是兄弟关系的组件
    import Cmp1 from '../Child/Cmp1' import Cmp2 from '../Child/Cmp2' import MyContext, { db } from '../context/Bus' export default class Sub extends Component { constructor(props) { super(props); this.state = { user: db.user2 } } render() { return ( <MyContext.Provider value={this.state.user}> <Cmp1 /> <Cmp2 /> <button onClick={this.fn.bind(this)}>按钮一下</button> </MyContext.Provider> ) } fn() { this.setState({ user: db.user1 }) } }

    Cmp2文件

    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} 
          </div>
        )
      }
    }

    Bus.js文件

    import React, { createContext } from 'react'
    
    // 如果createContext中有参数值,则表示 Provider中的没有写value值
    //相当于value的默认值
    // 使用默认值,可以实现平级
    //  Bus强一点,强在有数据  比vuex弱很多,只能获取
    // export const MyContext = createContext(db.user1)
    
    export const MyContext = createContext('共同的数据')
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    sqlilabs 5
    sqlilabs 1-4
    ipset
    kill命令的使用
    docker 札记
    批量删除数据库表中数据行
    正则表达式调试
    TimescaleDB安装学习
    记一次 Centos7 postgresql v11 安装时序数据库 TimescaleDB
    "知识库"
  • 原文地址:https://www.cnblogs.com/ht955/p/14690825.html
Copyright © 2011-2022 走看看