zoukankan      html  css  js  c++  java
  • react祖先与子孙多层传值

    先做数据源store.js文件

    // 状态 store 统一数据源
    import React, { createContext } from 'react'
    
    // Provider 发布消息
    // Consumer 对于发布的消息进行消费(接受)
    let { Provider, Consumer } = createContext()
    
    export {
      Provider,
      Consumer
    }

    App文件

    import React, { Component } from 'react'
    import Cmp1 from './components/Cmp1'
    import Cmp2 from './components/Cmp2'
    
    // 统一的数据源
    import { Provider } from './context/store'
    
    
    // 只有在类组件中才有生命周期
    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          title: '你好世界'
        }
      }
    
    
      render() {
    
        return (
          <div>
            {/* 多层组件之间的通信 发布一下,子孙们,祖先有数据给你们 */}
            <Provider value={this.state.title}>
              <Cmp1 />
             <Cmp2 />
            </Provider>
          </div >
        )
      }
    
    }
        

    Cmp1文件

    import React, { Component } from 'react';
    import Cmp2 from './Cmp2';
    
    // 统一数据源
    import { Consumer } from '../context/store'
    
    class Cmp1 extends Component {
      render() {
        return (
          <div>
            <Cmp2 />
        {/* <Consumer> 父级不想消费
              {value => <h3>{value}</h3>}
            </Consumer> */}
          </div>
        );
      }
    }
    
    export default Cmp1;

    Cmp2文件

    import React, { Component } from 'react'
    
    // 统一的数据源
    import { Consumer } from '../context/store'
    
    class Cmp2 extends Component {
      render() {
        return (
          <div>
            cmp2---得到数据
            <hr/>
            {/* 消费一下 */}
            <Consumer>
              {
                value=><h1>{value}</h1>
              }
            </Consumer>
          </div>
        );
      }
    }
    
    export default Cmp2;

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Ubuntu Linux下的Wireshark使用drcom_2011.lua分析drcom协议
    Keil提示premature end of file错误 无法生成HEX文件
    Linux和win7(win10)双系统时间错误问题 时间相差8小时
    Wireshark使用drcom_2011.lua插件协助分析drcom协议
    Keil报错failed to execute 'd:KeilC51BINC51.EXE'
    第一篇博文
    LG 7078 贪吃蛇
    LG 1791 人员雇佣
    洛谷 2698 Flowerpot
    HDU 5965 扫雷
  • 原文地址:https://www.cnblogs.com/ht955/p/14690877.html
Copyright © 2011-2022 走看看