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;