React跨组件通讯传递数据（Context）

1、创建Context对象，到处Provider和Consumer对象

const { Provider, Consumer } = createContext()

2、使用Provide包裹根组件提供数据

<Provider value={this.state.msg}>
    { /*根组件*/}
</Provider>

3、需要用到数据的组件使用Consumer包裹获取数据

<Consumer>
{value => /*基于context值进行传值*/ }
</Consumer>

import React, { createContext } from "react";

//1.创建Context对象
const { Provider, Consumer } = createContext()


function ComA(){
    return (
        <div>
            我是子组件
            <ComC />
        </div>
    )
}

//3.消费数据-孙组件
function ComC(){
    return (
        <div>
            我是孙组件
             //3.通过Consumer包裹组件获取数据
            <Consumer>
                { value => <div>{value}</div> }
            </Consumer>
        </div>
        
    )
}

//父组件
class App extends React.Component{
  state = {
    message: '父组件的初始值'
  }
  render() {
    return (
        //2.使用Provider包裹根组件
        <Provider value={this.state.message}>
            <div>
                <SonA />  
            </div>
        </Provider>
      
    )
  }
}